今天我们来讲讲一个比较冷门的内容，下面是小编收集有关于：“怎canvas实现橡皮筋式绘图？html5绘图案例分享！” 这个问题的相关内容。

 

　　什么叫橡皮筋式

 

　　指画图时橡皮筋一样伸缩自如。。

 

　　例子如下:point_down:

 

　　思路

 

　　思路很简单，只有橡皮筋式绘制功能要注意，以下总结mousedown，mousemove，mouseup三个阶段的思路

 

　　mousedown：记录start位置，drag（记录是否处于拖动状态）设置为true，getImageData(  )

 

　　mousemove：获取拖动时的位置pos，putImageData(  )，根据pos与start画直线

 

　　mouseup：drag恢复为false

 

　　就在于putImageData()与getImageData()这两个canvas的方法，putImageData()记录了鼠标点下时的图像，getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果

 

　　putImageData()相当于把“扫描”出来的线都擦掉

 

　　代码：