);
var ctx = ca.getCo
ntext('2d'
);
//生成n~m之间的随机数的函数
function random(n,m)
{
return Math.floor(Math.random() * (m - n) + n
);
}
//角度转弧度的函数
function toRd(angl
E){
return angle * Math.PI / 180;
}
//设置变量存储画布的最大宽高度
var maxH = ca.height;
var maxW = ca.width;
//每一个雪花都具有的特性
//x,y坐标、雪花半径、角度、
//先生成100个雪花
var
snows = [];
for(var i
=0;i<200;i++)
{
snow
s.push(
{
"left": random(0,maxW),"top": random(0,maxH),"deg": random(-20,20),//这个是起到更新数据的作用
"radius": random(2,10)
}
);
}
//将这些属性应用到每一雪花上
// for(var i
=0;i<
snow
s.length;i++)
{
// var r =
snows[i].radius;
// var x =
snows[i].left;
// var y =
snows[i].top;
// var ra = ctx.createRadialGradient(x,y,r / 4,x,r
);
// ra.addColorStop(0,"rgba(255,1)"
);
// ra.addColorStop(1,0.1)"
);
// ctx.fillStyle = ra;
// ctx
.beginPath(
);
// ctx.arc(x,r,2 * Math.PI
);
// ctx.fill(
);
// }
//如果向上面这样写的话不会有动画效果
//要实现动画效果就要让每一个雪花的特性都变动起来
//设置定时器,定时改变特性
var timer = se
Tinterval(function ()
{
snow(
);
//要实现动画效果首先要清除画布内容
ctx.clearRect(0,maxW,maxH
);
//每一个雪花每隔16ms需要变动的特性是
//x、y坐标,这
是需要
一个新的数值来做计算,改变它们的值
//为了避免重新定义这里直接利用
snow
s.radius来计算
for (var i = 0; i <
snow
s.length; i++)
{
//一开始每一个雪花的x,y坐标和半径r
//注意不能这样写,
后面的雪花的数据会把前面的顶掉,这个bug找了好长时间
// var r =
snows[i].radius;
// var x =
snows[i].left;
// var y =
snows[i].top;
// var d =
snows[i].deg;
//y变化量
var yChange = 0.5 *
snows[i].radius;
//x变化量 这里可以将x的变化量和y的变化量通过
snow
s.deg关联起来,
//从而使每一个雪花都沿着自己的轨迹走,也可以单独设定,所有的雪花轨迹一样
var xChange = 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)
{
snow
s.splice(i--,1
);
con
Tinue;//如果超出范围了
// 那这个雪花就没必要再进行
后面的渲染了,所以这个判断可以降低性能消耗
}
}
//开始渲染
var ra = ctx.createRadialGradient(
snows[i].left,
snows[i].top,
snows[i].radius / 4,
snows[i].left,
snows[i].radius
);
ra.addColorStop(0,255,1)"
);
ra.addColorStop(1,0.1)"
);
ctx.fillStyle = ra;
ctx
.beginPath(
);
ctx.arc(
snows[i].left,
snows[i].radius,2 * Math.PI
);
ctx.fill(
);
}
},16
);
//增加雪花的数量
//就是往
snows数组中添加成员
function
snow()
{
if(
snow
s.length<220)
{
var l = 220 -
snow
s.length;
for(var i
=0;i
{
snows.push({
"left": random(0,"top": 0,//这个是起到更新数据的作用
"radius": random(2,10)
})
}
}
}