使用canvas實現簡單的小球下落

canvas可以實現一些有趣的繪畫，可以實現規則或者不規則的圖形。我們這裡的小球就是一個通過canvas的方法arc畫出的圓。我們可以使用storke和fil來實現圓的顏色和邊框，如果你還想讓圓在漂亮一些，使用createRadialGradient可以實現球顏色的漸變。

var grad  = context.createRadialGradient(x,y,5,x,y,20);
        //顏色
        grad.addColorStop(0,'rgb(231, 74, 148)');
        grad.addColorStop(0.5
 
,'rgb(99, 75, 231)');
        grad.addColorStop(1,'rgb(78, 228, 156)');

        if(jiaflag!=1){
            Curve(cxt,x,y);
        }

        cxt.beginPath();
        cxt.arc(x,y,ball.r,0,2*Math.PI);
        cxt.strokeStyle="#000000";
        cxt.fillStyle=grad;

樣子大概就是這樣，createRadialGradient的各個引數的意思是
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 漸變的開始圓的 x 座標
y0 漸變的開始圓的 y 座標
r0 開始圓的半徑
x1 漸變的結束圓的 x 座標
y1 漸變的結束圓的 y 座標
r1 結束圓的半徑

動畫

小球畫好了，怎麼樣才能讓小球動起來呢？其實很簡單，所謂的動畫其實質就是一幀一幀的靜態元素組合起來，讓人眼感覺像是動的一樣。所以讓小球動起來，你需要在頁面讓不停的畫小球，而且你畫的小球的位置要符合運動的規律，這樣你的小球就動了起來。
首先，我們建立一個物件來存放小球的資訊，圓心座標、半徑、角度等等。

var ball = {//初始化小球
        x: 105,
        y: 500,
        r:20,
        g:2,
        vx:-4,
        vy:-40
    }

小球已經存在了我們只需要通過小球的屬性畫出來就行了。這裡我們使用一個方法實現，方便以後使用。

 function drawball(cxt,x,y){//畫小球
        cxt.clearRect(0,0,context.canvas.width,context.canvas.height);
        var grad  = context.createRadialGradient(x,y,5,x,y,20);
        //顏色
        grad.addColorStop(0,'rgb(231, 74, 148)');
        grad.addColorStop(0.5,'rgb(99, 75, 231)');
        grad.addColorStop(1,'rgb(78, 228, 156)');
        cxt.beginPath();
        cxt.arc(x,y,ball.r,0,2*Math.PI);
        cxt.strokeStyle="#000000";
        cxt.fillStyle=grad;
        cxt.stroke();
        cxt.fill();
        cxt.closePath();
    }

這樣我們就通過函式的方法畫出了小球，到時候我們只需要通過不停的呼叫這個方法就可以畫出運動的球了。當然，每次我們只需要出現一個小球，所以需要用clearRect來清除畫布。
小球運動的軌跡，我們就用一個平拋來實現。
平拋運動大家都很熟悉，你需要知道的是水平初速度和垂直初速度還有加速度。這裡我們只是簡單的例子，所以並不會完全按照實際生活中的重力加速度來計算。

 function update(){//通過簡單的運動原理更新小球位置
        ball.x = ball.x + ball.vx;
        ball.y = ball.y + ball.vy;
        ball.vy = ball.vy + ball.g;

        if( ball.y > (600 - ball.r)){//下邊框碰撞檢測
            ball.y = 600 - ball.r;
            ball.vy = -ball.vy*0.5;
        }

        if( ball.x < (ball.r)){//左邊框碰撞檢測
            ball.vx = -ball.vx;
        }
        if( ball.y < (ball.r)){//上邊框碰撞檢測
            ball.y = ball.r;
            ball.vy = -ball.vy*0.5;
        }
    }

這裡我只寫了上、左、下的邊框，右邊的沒寫，所以小球是可以從右邊滾出畫布的。我們可以通過修改的vx、vy來決定是上拋和下拋、左拋和右拋。

小球的運動軌跡

大家可能玩過憤怒的小鳥，在小鳥發射的時候會有一條小鳥經過的軌跡，那麼這些軌跡有事如何實現的呢？原理和我們小球運動是一樣的。不一樣的是我們需要清除畫布確保只有一個小球，而軌跡則需要保留。那麼既然每次都會清除畫布重繪，怎麼樣才能保留運動軌跡的小球的？也很簡單我們只需要定義一個數組來存放每次的運動位置，在小球重繪的時候，使用for迴圈把軌跡重繪就行了。

主要的原理就這些，我這裡在畫布上還加了一個橢圓 權當做一個籃框，當小球座標在橢圓內的時候就相當於進了一個球。

瀏覽器相容