这篇“如何使用canvas实现橡皮筋式绘图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用canvas实现橡皮筋式绘图”文章吧。

什么叫橡皮筋式

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

例子如下: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()相当于把“扫描”出来的线都擦掉

代码：

<canvasid="canvas"width="600"height="400"></canvas><scripttype="text/javascript">letcanvas=document.getElementById('canvas'),ctx=canvas.getContext('2d'),canvasLeft=canvas.getBoundingClientRect().left,//getBoundingClientRect()获取元素位置canvasTop=canvas.getBoundingClientRect().top;letimageData;//记录图像数据letstart=newMap([['x',null],['y',null]]);letdrag=false;//记录是否处于拖动状态canvas.onmousedown=function(e){letpos=positionInCanvas(e,canvasLeft,canvasTop);start.set('x',pos.x);start.set('y',pos.y);drag=true;//记录imageDataimageData=ctx.getImageData(0,0,canvas.width,canvas.height);}canvas.onmousemove=function(e){if(drag===true){letpos=positionInCanvas(e,canvasLeft,canvasTop);//相当于把扫描出来的线都擦掉，重新画ctx.putImageData(imageData,0,0);ctx.beginPath();ctx.moveTo(start.get('x'),start.get('y'));ctx.lineTo(pos.x,pos.y);ctx.stroke();}}canvas.onmouseup=function(e){drag=false;}functionpositionInCanvas(e,canvasLeft,canvasTop){//获取canvas中鼠标点击位置return{x:e.clientX-canvasLeft,y:e.clientY-canvasTop}}</script>

以上就是关于“如何使用canvas实现橡皮筋式绘图”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。