什么叫橡皮筋式
指画图时橡皮筋一样伸缩自如。。
例子如下:point_down:
思路
思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路
mousedown:记录start位置,drag(记录是否处于拖动状态)设置为true,getImageData(橡皮筋效果关键1)
mousemove:获取拖动时的位置pos,putImageData(对应getImageData,橡皮筋效果关键2),根据pos与start画直线
mouseup:drag恢复为false
关键就在于putImageData()与getImageData()这两个canvas的方法,putImageData()记录了鼠标点下时的图像,getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果
putImageData()相当于把扫描出来的线都擦掉
代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
注:相关教程知识阅读请移步到HTML教程频道。