## 第一課時：動畫效果 通過改變坐標，很容易在畫布 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`坐標先變小，然后在重力作用下，不斷增大，表示先上升后下降。