canvas橡皮筋式线条绘图的方法是什么

小编给大家分享一下canvas橡皮筋式线条绘图的方法是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司成立于2013年，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元砚山做网站,已为上家服务,为砚山各地企业和个人服务,联系电话:13518219792

什么叫橡皮筋式

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

思路

思路很简单，只有橡皮筋式绘制功能要注意，以下总结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()相当于把“扫描”出来的线都擦掉

代码

以上是“canvas橡皮筋式线条绘图的方法是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！