如何使用canvas API的getImagedata()方法实现绘画功能？

本文共计257个文字，预计阅读时间需要2分钟。

通过`getImageData()`获取画布上图像的数据，然后通过`putImageData()`将图像数据放回画布。具体实现如下：

javascript// 鼠标按下事件canvas.onmousedown=function(event) { ctx.moveTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop); ctx.beginPath();};

通过 getImageData() 复制画布上的像素数据，然后通过 putImageData() 将图像数据放回画布。

//鼠标按下 canvas.onmousedown=function(event){ ctx.moveTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop); ctx.lineTo(event.pageX-canvas.offsetLeft+1,event.pageY-canvas.offsetTop+1); ctx.stroke(); //获取像素，存到数组 var imageData=ctx.getImageData(0,0,w,w); arr.push(imageData); //鼠标移动 canvas.onmousemove=function(event){ ctx.lineTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop); ctx.stroke(); //获取像素，存到数组 var imageData=ctx.getImageData(0,0,w,w); arr.push(imageData); } //鼠标释放 canvas.onmouseup=function(){ canvas.onmousemove=null; canvas.onmousestart=null; } } //点击“点击回放”按钮 btn.onclick=function(){ ctx.clearRect(0,0,w,w); var i=0; var timer; clearInterval(timer); //利用定时器回放像素 timer=setInterval(function(){ if(arr.length==0){ clearInterval(timer); }else{ ctx.putImageData(arr[i],0,0); i++; if(i>=arr.length){ clearInterval(timer); } } },10) }