canvas实现闪亮的星星

之前网上看到一个一闪一闪星星的教程，觉得挺有意思的，于是按照效果自己做了一下。

实现效果：鼠标移动上去出现星星闪动，移开星星消失

源代码：

commonFunctions.js

window.requestAnimationFrame = (function(){
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback,element){
        return window.setTimeout(callback,1000/60);
    };
})();

main.js

var can;
var ctx;
var w;
var h;
var girlPic = new Image();
var starPic = new Image();
var num = 60;
var stars = [];
 
var lastTime;
var deltaTime;
var switchy =false;
var life = 0;
//初始化
function init(){
    can = document.getElementById('canvas');
    ctx = can.getContext('2d');
    w =can.width;
    h = can.height;
    girlPic.src = 'src/girl.jpg';
    starPic.src = 'src/star.png';
    for(var i = 0;i<num; i++){
        var obj = new starObj();
        stars.push(obj);
        stars[i].init();
    }
    lastTime = Date.now();
    gameloop();
    document.addEventListener('mousemove',mousemove,false);
}
document.body.onload = init;
function gameloop(){
    window.requestAnimationFrame(gameloop);//；两针之间的时间间隔不相等
    var now = Date.now();
    deltaTime = now - lastTime;
    lastTime = now;
    drawBackground();
    drawPic();
    drawStars();
    aliveUpdate();
}
//画布的颜色
function drawBackground(){
    ctx.fillStyle = '#393550';
    ctx.fillRect(0,0,w,h);
}
//绘制底图
function drawPic(){
    //drawImage(img,x,y,width,height)
    //x轴坐标正方向向右，y轴坐标正方向向下，（0,0）在canvans左上角
    ctx.drawImage(girlPic,100,150,600,300);
}
//鼠标移动
function mousemove(e){
    if(e.offsetX || e.layerX){
        var px = e.offsetX == undefined ?e.layerX:e.offsetX;
        var py = e.offsetY == undefined ?e.layerY:e.offsetY;
        //out switchy = false;in switchy = true;
        //px 在范围内&&py在范围内
        if(px>100 &&px<700&&py>150&&py<450){
            switchy = true;
        }
        else{
            switchy = false;
        }
    }
}
//控制星星出现
function aliveUpdate(){
    if(switchy){
        //星星出现
        life += 0.03 * deltaTime * 0.05;
        if(life>1){
            life = 1;
        }
    }
    else{
        //星星消失
        life -= 0.03 * deltaTime * 0.05;
        if(life<0){
            life = 0;
        }
    }
}

stars.js

var starObj = function(){
    this.x;
    this.y;
    this.picNo;
    this.timer;
    this.xSpd;
    this.ySpd;
};
//绘制多个星星
starObj.prototype.init = function(){
    this.x = Math.random()*600 + 100;
    this.y = Math.random()*300 + 150;
    this.picNo = Math.floor(Math.random()*7);
    this.timer = 0;
    this.xSpd = Math.random()*3 - 1.5;
    this.ySpd = Math.random()*3 -1.5;
};
starObj.prototype.update = function(){
    //随机位移
    this.x += this.xSpd * deltaTime *0.002;
    this.y += this.ySpd * deltaTime *0.002;
    //this.x 超过范围 初始化一个星星
    if(this.x<100 || this.x>700){
        this.init();
        return;
    }
    //this.y 超过范围 初始化一个星星
    if(this.y<150 || this.y>450){
        this.init();
        return;
    }
    this.timer += deltaTime;
    //星星闪烁
    if(this.timer>100){
        this.picNo += 1;
        this.picNo %= 7;
        this.timer = 0;
    }
};
starObj.prototype.draw = function(){
    //save() globalAlpha 只作用于星星
    ctx.save();
    //globalAlpha 全局透明度
    ctx.globalAlpha = life;
     
    //drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
    ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
    //restore()
    ctx.restore();
};
function drawStars(){
    for(var i = 0;i<num;i++){
        stars[i].update();
        stars[i].draw();
         
    }
}

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            <canvas id="canvas" width="800" height="600"></canvas>
        </div>
        <script type="text/javascript" src="js/commonFunctions.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/stars.js"></script>
    </body>
</html>