從Javascript動畫（一）瞭解了requestAnimationFrame函式，這一節我們使用這個函式來實現一個簡單的動畫。

第一步：畫靜止不動的小球

html

<div id="container">
	<canvas id="canvas"></canvas>
</div>

css

body{
    text-align: center;
}
#container{
    margin-top: 30px;
    display: inline-block;
    border-radius: 10px;
 

    box-shadow: 0 0 10px 0 #999;
    padding: 20px;
}
canvas{
    background-color: #fff;
    border: 1px solid #000;
}

javascript

var cvs = document.getElementById('canvas'),    // 獲取畫布元素
    ctx = cvs.getContext('2d');                 // 獲取畫面上下文物件，用於畫圖
cvs.width = 800;        // 設定畫布寬度
cvs.height = 600;       // 設定畫布高度
 


// 小球相關屬性
var ball = {
  x: 50,    // x座標
  y: 50,    // y座標
  r: 30,    // 小球半徑
  color: 'blue',    // 小球填充顏色
  vx: 1,            // 小球x軸速度  px/幀
  vy: 1             // 小球y軸速度  px/幀
};

/**
 * 將小球畫到畫布上顯示出來
 */
function draw() {
  ctx.fillStyle = ball.color;
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.
 
PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

// 呼叫畫圖函式
draw();

這樣就將靜止的小球給畫出來了

第二步：讓小球動起來

引入Javascript動畫（一）寫的requestAnimationFrame的polyfill檔案

<script src="../requestAnimationFrame-polyfill.js"></script>

小球動起來，就是要在每一幀的時候更改小球的位置，編寫如下update函式

/**
 * 更新小球位置，基於幀速率
 * @param dt 此幀離上幀間隔時間
 */
function update(dt) {
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.x - ball.r <= 0 ) {                  // 小球碰到了左邊
    ball.x = ball.r;
    ball.vx *= -1;
  } else if (ball.x + ball.r >= cvs.width) {    // 小球碰到了右邊
    ball.x = cvs.width - ball.r;
    ball.vx *= -1;
  }
  if (ball.y - ball.r <= 0 ) {                  // 小球碰到了上邊
    ball.y = ball.r;
    ball.vy *= -1;
  } else if (ball.y + ball.r >= cvs.height) {    // 小球碰到了下邊
    ball.y = cvs.height - ball.r;
    ball.vy *= -1;
  }
}

編寫動畫迴圈函式

// 呼叫畫圖函式
// draw();	// 已放到動畫迴圈函式內

var lasttime = undefined;
function animate(time) {
  if (lasttime === undefined) {
    lasttime = time;
  } else {
    var dt = time - lasttime;
    lasttime = time;
    update(dt);                 // 更新小球位置
    draw();                     // 更新後，將小球畫出來
  }
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate); // 呼叫requestAnimationFrame，使瀏覽器在最佳時機執行回撥函式

執行程式幾秒後

怎麼會是這樣的呢？ canvas在每次作畫時，並不會自動清除上次的繪畫結果，所以要看到單個小球的話，需使用clearRect函式主動清除上次的繪畫結果。
修改draw函式：

function draw() {
  ctx.clearRect(0, 0, cvs.width, cvs.height);		// 新增此行程式碼
  // 其它程式碼不改動
}

此次就不上圖了，自己執行看下吧~ 0.0