canvas可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它

    我们不得不对所有内容（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。

    canvas运动形成的过程：必须不断重绘一个新的矩形！利用视觉暂留，形成运动！

    清屏→更新→渲染→清屏→更新→渲染→清屏→更新→渲染→清屏→更新→…….

    <!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; background: url(images/bg.png); } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 // var x = 100 // 开始运动 // var timer = setInterval(function () { // x += 5 // // 清屏 // ctx.clearRect(0, 0, 800, 600) // // 重新绘制 // ctx.fillRect(x, 100, 100, 100) // }, 50) // 士兵走路 varimage = newImage() image.src = “images/shibing.png” varsx = 0 vardx = 100 varstep = 10 vartimer = null image.onload = function () { // 开始运动定时器 timer = setInterval(function () { sx += 120 if (sx >= 960) { sx = 0 } dx += step // 清屏 ctx.clearRect(0, 0, 800, 600) ctx.drawImage(image, sx, 450, 120, 150, dx, 100, 120, 150) }, 200) } </script> </body> </html>