用Canvas畫漫天繁星吧~

初學Canvas寫了一個在一片區域內隨機產生星星並且不斷閃動的效果。具體實現如下所示。
首先創建一個canvas讓其適配屏幕的大小。

    h = screen.height - 200;
    w = screen.width - 10;
    can1 = document.getElementById("canvas1");
    can1.setAttribute('width', w);
    can1.setAttribute('height', h);
    ctx1 = can1.getContext("2d");

然後創建一個遊戲循環gameLoop()方法，利用requestAnimationFrame()每幀調用該方法，首先繪製背景圖片，然後調用star.draw()方法繪製所有的星星。這裏還需要記錄一下每幀間隔的調用時間，爲了後面動畫更加平滑而使用。

  function gameLoop() {
    requestAnimationFrame(gameLoop);
    var now = Date.now();
    detaltime = now - lasttime  ;
    lasttime = now;

    ctx1.drawImage(bgPic, 0, 0, w, h);

    star.draw();

}

最後是star類的介紹，star類是管理所有星星繪製的類，每一顆星星都有三種狀態：暗、變亮、閃耀、變暗。這樣一個過程，下面是該類的代碼。

var starObj = function () {
    this.isMax = []; //是否完成變化
    this.time = []; //正在變化的時間
    this.x = [];    //x座標
    this.y = [];    //y座標
    this.life_time = []; //存活時間
    this.jianbain = [] ; //漸變時間
    this.star_pic = new Image();
    this.star2_pic = new Image();
}
starObj.prototype.num = 50;//星星數量

搞清楚了這三種狀態，下面就是星星出生的born()函數，開始時隨機產生10顆會變亮的星星，每顆星星擁有在2s~4s時間內的生命週期，並且開始計時。

starObj.prototype.born = function (i) {
        this.isMax[i] = false;
        this.time[i] = 0;
        this.x[i] = w/2 + Math.random() * 200 + i*10;
        this.y[i] = 20 + Math.random() * 200 + i*2;
        this.life_time[i] = (Math.random()*2 + 2) * 1000;
        this.jianbain[i] = 0;
}
starObj.prototype.suiji = function () {
    var sui = parseInt(Math.random()*49+1, 10); //0-49隨機數
    if(!this.isMax[sui]){
        this.isMax[sui] = true;
    }else{
        this.suiji();
    }

}

最後是星星的draw方法，該方法先判斷每顆星星的狀態，當它處於變亮狀態時，增加它的time值，同時結合前面提到的detaltime 值（刷幀時間間隔），更加平滑的改變星星的透明度從而使它變亮，當time值到達一定的時間點時，星星改變圖片，變成閃耀的狀態，接着不斷變暗並消失。當一個星星生命週期結束後，立即重置這個星星的值，相當於一顆新的星星。最後再次隨機長產生一個星星，來經歷這個生命週期。
因爲每個星星的週期都有所不同，這樣便產生了一個不斷閃爍的星空效果~再配上一個CSS3的動態表單，是不是感覺挺高大上的，哈哈~（不會傳動圖，先湊活看吧，有興趣可以再github下載源碼）

github地址：https://github.com/StringKun/LoginDemo