要实现图片或形状在canvas画布上的移动：原理其实就是形状在画布上的x,y轴不停的呈现和擦除动作，造成在画布上移动的假象。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); for(var i=0;i<=150;i++){ setTimeout(function(i){ // ctx.clearRect((20+i),20,100,50); },500); } var num = 0; var test1 = setInterval(function (){ num++; console.log(num); ctx.clearRect((20+num),20,100,50); if (num > 150) { clearInterval(test1); } },50); </script> </body> </html>