使用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