## 第一课时：动画效果 通过改变坐标，很容易在画布 Canvas 元素上产生动画效果。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var posX = 20; var posY = 100; setInterval(function () { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); posX += 1; posY += 0.25; ctx.beginPath(); ctx.fillStyle = 'white'; ctx.arc(posX, posY, 10, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); }, 30); ~~~ 上面代码会产生一个小圆点，每隔30毫秒就向右下方移动的效果。`setInterval()`函数的一开始，之所以要将画布重新渲染黑色底色，是为了抹去上一步的小圆点。 在这个例子的基础上，通过设置圆心坐标，可以产生各种运动轨迹。下面是先上升后下降的例子。 ~~~ var vx = 10; var vy = -10; var gravity = 1; setInterval(function () { posX += vx; posY += vy; vy += gravity; // ... }); ~~~ 上面代码中，`x`坐标始终增大，表示持续向右运动。`y`坐标先变小，然后在重力作用下，不断增大，表示先上升后下降。