canvas雪花效果核心代码分享
话不多说，请看代码：
varca=document.getElementById("ca");
varctx=ca.getContext('2d');
//生成n~m之间的随机数的函数
functionrandom(n,m){
returnMath.floor(Math.random()*(m-n)+n);
}
//角度转弧度的函数
functiontoRd(angle){
returnangle*Math.PI/180;
}
//设置变量存储画布的最大宽高度
varmaxH=ca.height;
varmaxW=ca.width;
//每一个雪花都具有的特性
//x,y坐标、雪花半径、角度、
//先生成100个雪花
varsnows=[];
for(vari=0;i<200;i++){
snows.push({
"left":random(0,maxW),
"top":random(0,maxH),
"deg":random(-20,20),//这个是起到更新数据的作用
"radius":random(2,10)
});
}
//将这些属性应用到每一雪花上
//for(vari=0;i<snows.length;i++){
//varr=snows[i].radius;
//varx=snows[i].left;
//vary=snows[i].top;
//varra=ctx.createRadialGradient(x,y,r/4,x,y,r);
//ra.addColorStop(0,"rgba(255,0,0,1)");
//ra.addColorStop(1,"rgba(255,0,0,0.1)");
//ctx.fillStyle=ra;
//ctx.beginPath();
//ctx.arc(x,y,r,0,2*Math.PI);
//ctx.fill();
//}
//如果向上面这样写的话不会有动画效果
//要实现动画效果就要让每一个雪花的特性都变动起来
//设置定时器，定时改变特性
vartimer=setInterval(function(){
snow();
//要实现动画效果首先要清除画布内容
ctx.clearRect(0,0,maxW,maxH);
//每一个雪花每隔16ms需要变动的特性是
//x、y坐标，这是需要一个新的数值来做计算，改变它们的值
//为了避免重新定义这里直接利用snows.radius来计算
for(vari=0;i<snows.length;i++){
//一开始每一个雪花的x,y坐标和半径r
//注意不能这样写，后面的雪花的数据会把前面的顶掉，这个bug找了好长时间
//varr=snows[i].radius;
//varx=snows[i].left;
//vary=snows[i].top;
//vard=snows[i].deg;
//y变化量
varyChange=0.5*snows[i].radius;
//x变化量这里可以将x的变化量和y的变化量通过snows.deg关联起来，
//从而使每一个雪花都沿着自己的轨迹走，也可以单独设定，所有的雪花轨迹一样
varxChange=Math.tan(toRd(snows[i].deg))*yChange;//这里的三角公式经过测试tan是最合适的
snows[i].top+=yChange;
snows[i].left+=xChange;
//经过上面这些步骤每一个雪花的x,y坐标都发生了改变，随着时间的推移，
//雪花都会飘出画布，雪花最后就没有了，这里需要作出判断，把超出画布的雪花从snows
//里面删掉，然后再添加新的雪花，这一步在最后进行，这里只做判断
if(snows[i].left<0||snows[i].left>maxW||snows[i].top>maxH){
//这里的x<0是因为xChange可能为负值
if(i>0){
snows.splice(i--,1);
continue;//如果超出范围了
//那这个雪花就没必要再进行后面的渲染了，所以这个判断可以降低性能消耗
}
}
//开始渲染
varra=ctx.createRadialGradient(snows[i].left,snows[i].top,snows[i].radius/4,snows[i].left,snows[i].top,snows[i].radius);
ra.addColorStop(0,"rgba(255,255,255,1)");
ra.addColorStop(1,"rgba(255,255,255,0.1)");
ctx.fillStyle=ra;
ctx.beginPath();
ctx.arc(snows[i].left,snows[i].top,snows[i].radius,0,2*Math.PI);
ctx.fill();
}
},16);
//增加雪花的数量
//就是往snows数组中添加成员
functionsnow(){
if(snows.length<220){
varl=220-snows.length;
for(vari=0;i<l;i++){
snows.push({
"left":random(0,maxW),
"top":0,
"deg":random(-20,20),//这个是起到更新数据的作用
"radius":random(2,10)
})
}
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！