通过 getImageData() 复制画布上的像素数据,然后通过 putImageData() 将图像数据放回画布。 //鼠标按下canvas.onmousedown=function(event){ ctx.moveTo(event.pageX-canvas.offsetLeft,event.pageY-canvas.offsetTop); ctx.
//鼠标按下 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) }