canvas 四處亂竄的小球

下面分享一個五彩繽紛，四處亂竄的小球，效果圖如下。

主要思路：使用物件導向的方法：首先定義一個球的建構函式，在函式原型上寫兩個方法：
1. 畫球的方法；
2. 球移動的方法；
然後，使用for迴圈例項化多個小球不停更新canvas畫布形成小球碰撞的景象
下面是建構函式的引數方法

// 定義一個球的建構函式
        function Boll(x,y,r,color,speedx,speedy){
            this.x = x;  this.y = y;  this.r = r;  this.color = color;
            this.speedx = speedx;   this.speedy = speedy;
        }
        // 畫的方法
        Boll.prototype.draw = function(){
            context.beginPath();
            context.arc(this.x,this.y,this.r,0,Math.PI*2);
            context.fillStyle = this.color;
            context.fill();
        }
        // 球的移動方法
        Boll.prototype.move = function(){
            this.x += this.speedx;
            this.y += this.speedy;
            // 碰壁檢測
            if(this.x<this.r || this.x>canvas.width-this.r){
                this.speedx *= -1;
            }
            if(this.y<this.r || this.y>canvas.height-this.r){
                this.speedy *= -1;
            }
        }

封裝了兩個隨機數函式，用來隨機小球半徑，初始位置的x軸和y軸座標以及小球的顏色。

// 隨機數函式
        function randNum(min,max){
            return parseInt(Math.random()*(max-min) + min) ;
        }
// 隨機顏色
        function randColor(){
            return "rgb("+randNum(0,256)+","+randNum(0,256)+","+randNum(0,256)+")";
        }

使用for迴圈例項化100個物件，生成100個顏色，半徑，初始位置不同的的小球，在canvas畫布裡碰壁反彈。

var arr = [];
        for(var i = 0 ; i < 100 ;i++){
            var r = randNum(5,45);
            var x = randNum(r,canvas.width-r);
            var y = randNum(r,canvas.height-r);
            var speedx = randNum(1,4);
            var speedy = randNum(1,4);
            var color = randColor();
            var newboll = new Boll(x,y,r,color,speedx,speedy);
            arr.push(newboll);
        }

封裝一個act函式使用window.requestAnimationFrame()方法做動畫，與setInterval，setTimeout類似。
window.requestAnimationFrame：
概念：採用系統時間間隔，保持最佳繪製效率，不會因為間隔時間過短，造成過度繪製，增加開銷；也不會因為間隔時間太長，使用動畫卡頓不流暢。
區別：它調取cpu效能(顯示卡效能)，效率高；而setInerval和setTimeout是調取瀏覽器的效能，有侷限性。

function act(){
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i = 0 ; i < arr.length ; i++){
        arr[i].draw();
        arr[i].move();
    }
    window.requestAnimationFrame(act);
}
act();

總結：使用物件導向方法定義了一個球的建構函式，好處在於可以在多處呼叫