结合使用Canvas API与History API——模拟绘图
2016-08-03 17:03
288 查看
大家都对画图软件不陌生吧,可以在画布上随意涂鸦、绘画,还可以为你画的每一步进行撤销和恢复。今天正好得空,便结合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元素中的空白图像保存在历史记录中,所以有了以下两行代码。
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元素中的空白图像保存在历史记录中,所以有了以下两行代码。
相关文章推荐
- 语义Web服务的API使用实例:OWL-S API结合matchmaker、推理机(Jena、Pellet)进行语义转换、匹配、组合及调用web服务
- .NET中使用API绘图
- History API 使用不当导致浏览器无法后退
- Android学习第四篇——使用绘图API自定义视图
- 25 API-GUI(事件监听机制,适配器模式),Netbeans的概述和使用(模拟登陆注册GUI版)
- 个人技术作品 - PHP 水印类及上传图片加水印结合使用的API及使用实例
- laravel和dingoapi的结合使用
- 【原】使用Tkinter绘制GUI并结合Matplotlib实现交互式绘图
- 3. 使用绘图API自定义视图 --- 旋转的方块
- 使用Python结合Face++ API识别人脸
- 使用"增强现实"的3D绘图API来增强角色形象的活泼性
- google map api 与jquery结合使用(2) --标注,浮窗[转帖]
- google map api 与jquery结合使用(1)--控件,监听器[转帖]
- CAAnimation结合绘图使用
- 论坛源码推荐(3月12日):使用UIDynamic API模拟真实世界中的多个效果
- 使用API模拟鼠标事件
- android map api展示地图及和定位结合使用
- 结合实际问题浅谈如何使用蒙特卡罗算法模拟投资分析
- iOS绘图API的使用
- Qt编程可不可以结合其他的第三方库和本土API?(有zeroMQ的Qt封装,还可轻易使用Python的库)