初学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