结合使用Canvas API与History API——模拟绘图
来源:互联网 发布:系统检测安全数据 编辑:程序博客网 时间:2024/05/20 02:23
大家都对画图软件不陌生吧,可以在画布上随意涂鸦、绘画,还可以为你画的每一步进行撤销和恢复。今天正好得空,便结合Canvas API 与History API做了一个模拟绘图的示例,当然,这里面我主要讲的还是history API的使用。下面的实例中显示一个canvas元素,用户可以在该元素中随意使用鼠标书写文字或绘制图画,当用户单击一次或连续单击浏览器的后退按钮时,可以撤销当前书写或绘制的最后一笔或多笔,当用户单击或连续单击浏览器的前进按钮时,可以重绘当前书写或绘制的最后一笔或多笔。好了,废话不多说,跟我一起动手做做吧!
1.Html代码及样式
页面中的img元素加载的是一个黑色小圆点图片,这里作为绘图用的笔刷。当用户在canvas元素中按下并连续拖动鼠标左键时,按照用户拖动的轨迹连续绘制该黑色小圆点,这样处理之后会在浏览器中显示用户书写文字或绘制图画时所绘制的每一笔。
2.javascript脚本代码
A) 首先要获取页面canvas元素,img元素,引用canvas上下文context对象,以及用于控制是否继续进行绘制操作的布尔值变量isDrawing,当isDrawing的值为true时代表用户已按下鼠标左键,可以继续绘制,当该值为false时表示用户已松开鼠标左键,停止绘制。
B) 接下来屏蔽用户在canvas元素中通过按下鼠标左键、以手指或书写笔触发的pointerdown事件(pointerdown事件属于一种touch event事件)
C) 然后,监听用户在canvas元素中按下鼠标左键时触发的mousedown事件,并将事件处理函数指定为startDrawing函数;监听用户在canvas元素中移动鼠标时触发的mousemove事件,并将事件处理函数指定为draw函数;监听用户在canvas元素中松开鼠标左键时触发的mouseup事件,并将事件处理函数指定为stopDrawing函数;监听用户单击浏览器的后退按钮或前进按钮时触发的popstate事件,并将事件处理函数指定为loadState函数。代码如下:
写到这里,简单的绘制功能已经完成,不过该页面还是存在一个问题,即当用户在canvas元素中绘制了多笔之后,重新在浏览器的地址栏中输入页面地址(这时浏览器中的canvas元素显示空白图像),/然后绘制第一笔,之后再单击浏览器的后退按钮时,canvas元素中并不显示空白图像,而是直接显示输入页面地址之前的绘制图像,这样看起来浏览器中的历史纪录并不连贯,因为canvas元素中缺少了一副空白图像。为了修正这个问题,我们在页面打开时就将canvas元素中的空白图像保存在历史记录中,所以有了以下两行代码。
- 结合使用Canvas API与History API——模拟绘图
- HTML5 Canvas绘图API
- Canvas绘图API快速入门
- canvas 绘图API(二)
- Canvas 基本绘图Api记录
- html5与百度地图API结合使用。
- History API 使用指北
- Android Canvas API使用
- history API
- History API
- 关于HTML5 的history API介绍与使用
- 浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)
- iOS绘图API的使用
- 使用绘图API自定义组件
- JavaScript基础——使用Canvas绘图
- History API与浏览器历史堆栈管理
- History API与浏览器历史堆栈管理
- HTML5之Canvas绘图——使用Canvas绘制图形
- Scala学习笔记1 - 基础
- 最大子序列最长递增子序列最长公共子串最长公共子序列
- linux基本命令
- Scala中常见的容器 Map
- MySQL快速入门02----数据库操作和表操作
- 结合使用Canvas API与History API——模拟绘图
- MongoDB学习(二) 下载和安装
- PyGobject(一百零八)CSS系列——混合模式
- 第三方支付宝API应用流程
- jpg图片解码
- 状态压缩DP POJ 2411 Mondriaan's Dream
- 操作系统页面置换算法之最优置换(OPT)算法
- 快排,二叉树的逐层遍历(面试常考)
- 添加全局的css样式