今天我们来讲讲一个比较冷门的内容,下面是小编收集有关于:“怎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()相当于把“扫描”出来的线都擦掉
  代码:
                    	
                    	
                    	  
                    	    
                    	    
                    	    
                    	 
    如果您觉得本文的内容对您的学习有所帮助:
     
                    	
                    	   
                    	   关键字:
jquery