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

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

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

什么叫橡皮筋式

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

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

思路

思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路  
mousedown:记录start位置,drag(记录是否处于拖动状态)设置为true,getImageData(橡皮筋效果关键1)  
mousemove:获取拖动时的位置pos,putImageData(对应getImageData,橡皮筋效果关键2),根据pos与start画直线  
mouseup:drag恢复为false  
关键就在于putImageData()与getImageData()这两个canvas的方法,putImageData()记录了鼠标点下时的图像,getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果

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

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

代码

     
    

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


网页题目:canvas橡皮筋式线条绘图的方法是什么
网页URL:http://ybzwz.com/article/ghhghg.html