canvas動畫自由落體運動

經過前面的文章，我們已經能夠在canvas畫布上畫出各種炫酷的圖形和畫面，但是這些畫面都是禁止的，怎麼樣才能讓他們動起來呢？

儲存canvas狀態。

繪製動畫圖形（animated shapes）。

恢復 canvas 狀態。

在 canvas 上繪製內容是用 canvas 提供的或者自定義的方法，而通常，我們僅僅在指令碼執行結束後才能看見結果，比如說，在 for 迴圈裡面做完成動畫是不太可能的。

因此，為了實現動畫，我們需要一些可以定時執行重繪的方法。window物件提供了下面的方法實現定時動畫：

如果你並不需要與使用者互動，你可以使用setinterval()方法，它就可以定期執行指定**。如果我們需要做乙個遊戲，我們可以使用鍵盤或者滑鼠事件配合上settimeout()方法來實現。通過設定事件監聽，我們可以捕捉使用者的互動，並執行相應的動作。

window.requestanimationframe()這個方法提供了更加平緩並更加有效率的方式來執行動畫，當系統準備好了重繪條件的時候，才呼叫繪製動畫幀。一般每秒鐘**函式執行60次，也有可能會被降低。

window.requestanimationframe = (function();
})();

上面介紹了canvas動畫的基本概念，接下來我們將會在canvas中實現小球下落的動畫。小球的完整**再本文結尾。點選可跳轉到結尾。

首先需要在canvas上繪製乙個小球。

var ctx = document.getelementbyid('canvas').getcontext('2d');
if (!ctx) 
var ball = ,
clear: function() 
}ball.draw(); // 繪製小球

繪製了小球之後，要新增動畫，還需要為小球新增速率向量進行移動。另外，速度也是變化的量，對於只有落體運動，還有豎直方向的重力加速度，所以還需要為小球加上加速度。

var ball = ,
dx: function() ,
dy: function() ,
next: function() ,
};

var animate; // 記錄動畫
ball.draw();
// 繪製一幀
function draw()

若沒有任何的碰撞檢測，我們的小球很快就會超出畫布。我們需要檢查小球的 x 和 y 位置是否已經超出畫布的尺寸以及是否需要將速度向量反轉。

boundary: function(top, right, bottom, left)  else if (this.y < top)  else if (ball.x > right)  else if (ball.x < left) 
}

為了使得小球運動更加逼真，可以新增拖尾效果。使用clearrect函式清除前一幀動畫時，若用乙個半透明的fillrect函式取代之，就可輕鬆製作長尾效果。

ctx.fillstyle = 'rgba(255,255,255,0.3)';
ctx.fillrect(0,0,canvas.width,canvas.height);

移動滑鼠到canvas內可讓小球動起來！

在實際的生活中，小球碰撞到地面**的時候，**的高度會越來越低，因為碰撞地面損失了一部分速度。

boundary: function(top, right, bottom, left)  else if (this.y < top)  else if (ball.x > right)  else if (ball.x < left) 
}

上面這種方式會偶爾使得小球無法**。

在碰撞地面的時候，小球的**之後的速度和位移，準確值需要根據嚴格的勻加速公式以及損失之後的速度來計算。

邊界檢查時上述方法是檢查圓心和邊界的位置，更好的方式是檢查圓周和邊界的距離。

原始碼可以以及效果可以參考這兒：本文例項

上述所有方式的源**如下：

```html

ball animate

```

canvas動畫 自由落體運動