canvas雪花效果核心代码分享

canvas雪花效果核心代码分享

话不多说，请看代码：

var ca = document.getElementGgtotkById("ca");

var ctx = ca.getContext('2d');

//生成n~m之间的随机数的函数

function random(n,m){

return Math.floor(Math.random() * (m - n) + n);

}

//角度转弧度的函数

function toRd(angle){

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++){

snows.push({

"left": random(0, maxW),

"top": random(0, maxH),

"deg": random(-20, 20), //这个是起到更新数据的作用

"radius": random(2, 10)

});

}

//将这些属性应用到每一雪花上

// for(var i=0;i

// var r = snows[i].radius;

// var x = snows[i].left;

// var y = snows[i].top;

// var ra =http:// 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();

// }

//如果向上面这样写的话不会有动画效果

//要实现动画效果就要让每一个雪花的特性都变动起来

//设置定时器，定时改变特性

var timer = setInterval(function () {

snow();

//要实现动画效果首先要清除画布内容

ctx.clearRect(0, 0, maxW, maxH);

//每一个雪花每隔16ms需要变动的特性是

//x、y坐标，这是需要一个新的数值来做计算，改变它们的值

//为了避免重新定义这里直接利用snows.radius来计算

for (var i = 0; i < snows.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的变化量通过snows.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){

snows.splice(i--, 1);

continue;//如果超出范围了

// 那这个雪花就没必要再进行后面的渲染了，所以这个判断可以降低性能消耗

}

}

//开始渲染

var ra = 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数组中添加成员

function snow(){

if(snows.length<220) {

var l = 220 - snows.length;

for(var i=0;i

snows.push({

"left": random(0, maxW),

"top": 0,

"deg": random(-20, 20), //这个是起到更新数据的作用

"radius": random(2, 10)

})

}

}

}

// var r = snows[i].radius;

// var x = snows[i].left;

// var y = snows[i].top;

// var ra =http:// 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();

// }

//如果向上面这样写的话不会有动画效果

//要实现动画效果就要让每一个雪花的特性都变动起来

//设置定时器，定时改变特性

var timer = setInterval(function () {

snow();

//要实现动画效果首先要清除画布内容

ctx.clearRect(0, 0, maxW, maxH);

//每一个雪花每隔16ms需要变动的特性是

//x、y坐标，这是需要一个新的数值来做计算，改变它们的值

//为了避免重新定义这里直接利用snows.radius来计算

for (var i = 0; i < snows.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的变化量通过snows.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){

snows.splice(i--, 1);

continue;//如果超出范围了

// 那这个雪花就没必要再进行后面的渲染了，所以这个判断可以降低性能消耗

}

}

//开始渲染

var ra = 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数组中添加成员

function snow(){

if(snows.length<220) {

var l = 220 - snows.length;

for(var i=0;i

snows.push({

"left": random(0, maxW),

"top": 0,

"deg": random(-20, 20), //这个是起到更新数据的作用

"radius": random(2, 10)

})

}

}

}

snows.push({

"left": random(0, maxW),

"top": 0,

"deg": random(-20, 20), //这个是起到更新数据的作用

"radius": random(2, 10)

})

}

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。