摘要：重力加速度在這一部分我們介紹加速度中比較特別的一個重力加速度。重力加速度其實是由兩個物體間的引力形成的，到后面我們專門會有一個章節來介紹萬有引力，并且將它運用于我們的動畫之中。

在上一節中我們介紹了速度的基本概念，包括沿坐標軸的速度，和更普適的任意方向的速度，在文章的最后我們做了一個鼠標跟隨的示例，以及通過改變物體的rotation屬性做了一個關于速度的擴展。通過上一節的學習你會發現我們的物體可以沿著任意方向運動，但是這還遠遠不夠，因為我們的物體都是在做勻速運動。
既然有勻速運動，當然就有變速運動嘍！這一節我們介紹本章的另一個重要內容加速度。本節將分為下面幾個部分：

加速度基本概念

沿坐標軸的加速度

加速度的合成與分解

重力加速度

太空船(運用實例)

本章總結

1.加速度基本概念

以防有的同學把物理知識都還給老師了！在這我先廢話的介紹下加速度是什么，好吧！就一句話，加速度是描述物體速度變化快慢的物理量。我們知道速度是表征物體運動快慢的物理量，這里加速度是來表征速度的變化的。用物理上的時間/速度圖來表示就是這個樣子：

從圖中我們可以看到，勻速運動的速度是一直保持不變的，而變速運動的速速是隨著時間變化的。如圖所示，這里展示了一個勻加速運動，在Δt的時間內，速度增加了Δv，那么加速度用公式就可以表示為 a= Δv / Δt。ok！惡心的物理公式就此打住吧！下面我們來看看在代碼中是如何實現的吧。

2.沿坐標軸的加速度

在這里，我們先介紹沿著坐標軸的的加速度，具體代碼如下：

       your browser not support canvas
   
    //引入工具函數文件
    //引入球類
   

在上面的代碼中我們首先，定義了速度和加速度，然后在動畫循環中讓速度每一幀都加上加速度，這樣每一幀速度的值都在增加，球的位置相對來說每一幀就會增加的越來越多，反映到動畫中就是運動的越來越塊。這里我要感謝熱心的網友給我推薦的GIF制作工具，讓本文不再是干巴巴的文字與圖片。廢話不多說，上圖：

勻速運動

加速運動

為了效果更加突出，這里放上了勻速運動的圖片，與加速運動的圖片做了一個對比。在示例代碼中小球的運動方向沿著X軸，當然你也可以沿著Y軸，或者兩者同時。當你同時在X軸和Y軸定義了加速度，你會發現和任意方向的速度一樣，小球會沿著兩者合速度的方向移動，這就引出了我們的下一部分--任意方向的加速度。

3.加速度的合成與分解

有了前一節關于速度的合成與分解的鋪墊，這里就變得很簡單了，加速度同樣可以像速度那樣合成分解。這里我們假設要讓小球沿著30度的方向做加速度為0.05的加速運動，具體代碼如下：

window.onload = function(){
           var canvas = document.getElementById("canvas");
           var context = canvas.getContext("2d");
           
           var ball = new Ball(20);
           ball.x = 0;
           ball.y = 0;
           
           var vx = 0, vy = 0, //初始速度為0
               ax = 0, ay = 0, //分加速度為0
               angle = 30, //運動方向
               aTotal = 0.05; // 定義加速度的大小
           
           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0,0,canvas.width,canvas.height);
               
               //加速度分解
               ax = Math.cos(30 * Math.PI/180)*aTotal;
               ay = Math.sin(30 * Math.PI/180)*aTotal;
               
               vx += ax;
               vy += ay;
         
               ball.x += vx;
               ball.y += vy;
               ball.draw(context);
           }());
       }

具體效果如下圖所示：

與任意方向速度的概念一樣，我們設定加速度的大小，以及物體運動的方向。然后再動畫循環中，將加速度分解到水平和垂直兩個方向，然后讓水平速度和垂直速度在每一幀都加上相對應的加速度值，我們就可以得到一個沿任意方向加速(減速)運行的小球。

4.重力加速度

在這一部分我們介紹加速度中比較特別的一個 —— 重力加速度。重力加速度其實是由兩個物體間的引力形成的，到后面我們專門會有一個章節來介紹萬有引力，并且將它運用于我們的動畫之中。

對于這個特殊的加速度，我相信你對它應該不會感到陌生，因為在中學的課本中G這個符號不知道出現了多少次。我們需要知道的是，在地球上，任何一個物體從空中下落到地面，它都有一個豎直向下的加速度。

ok！代碼時間，我們的題目是：小球從空中自由降落至地面，然后彈起，循環往復，直到它最終速度為零停留在地面。好吧！這次我們先看看模擬出來的效果：

具體代碼如下：

window.onload = function(){
           var canvas = document.getElementById("canvas");
           var context = canvas.getContext("2d");
           
           var ball = new Ball(20, "red");
               ball.x = canvas.width/2
               ball.y = canvas.height/2 - 200;
               
           var vy = 0,  //初始速度
                gravity = 0.2, //定義重力加速度
                bounce = -0.8; //定義反彈系數
                
           //碰撞檢測
           function checkGround(ball){
               if(ball.y + ball.radius > canvas.height){
                   ball.y = canvas.height - ball.radius;
                   vy *= bounce; //速度反向并且減小
               }
           }

           (function drawFramw(){
              window.requestAnimationFrame(drawFramw, canvas);
              context.clearRect(0, 0, canvas.width, canvas.height);
              
              vy += gravity;
              ball.y += vy;
              
              //碰撞檢測
              checkGround(ball);
              ball.draw(context);
           }());
   }

在這段代碼中，除了本章介紹的內容，還包括部分下一章會介紹的內容，但是以你們的聰明才智我相信這完全是小菜一碟，對吧！我們在初始化階段定義了在Y軸方向的初始速度vy, 還有重力加速度gravity, 以及一個反彈系數bounce。這里面我們做了一個簡單的碰撞檢測，當小球下落到地面(也就是canvas畫布的底部)，它的位置為 canvas.height - ball.radius，并且此時速度反彈，方向向上。然后再循環動畫中調用碰撞檢測函數，這樣就出現了落地反彈的效果，至于為什么會最后停留在地面上，那是因為bounce是個小數，每碰撞一次vy 都會減小。好了，這只是一個簡單的動畫，我就不費嘴皮子了。

5.太空船

在這個實例中我們要達到的效果是：通過鍵盤上的方向鍵控制太空船朝著不同的方向運動。在這里我們需要新建一個spaceShip.js類文件，值得注意的是加上該文件你的js文件夾中應該包含了以下四個文件：

utils.js

arrow.js

ball.js

ship.js

ship.js文件的代碼如下：

spaceShip.js文件

    function SpaceShip(){
      this.x = 0;
      this.y = 0;
      this.width = 25;
      this.height = 25;
      this.rotation = 0;
      this.showFlame = false;
    }

    SpaceShip.prototype.draw = function(context){
        context.save();
        context.beginPath();
        context.translate(this.x, this.y);
        context.rotate(this.rotation);
        context.strokeStyle = "#ffffff";
        context.moveTo(10, 0);
        context.lineTo(-10, 10);
        context.lineTo(-5, 0);
        context.lineTo(-10, -10);
        context.lineTo(10, 0);
        context.closePath();
        context.stroke();
        if(this.showFlame == true){
            context.save()
            context.beginPath();
            context.strokeStyle = "#f69";
            context.moveTo(-7.5, -5);
            context.lineTo(-15, 0);
            context.lineTo(-7.5, 5);
            context.stroke();
            context.restore();
        }
        context.restore();
    }

效果圖如下：

具體代碼如下：

 
       your browser not support canvas