canvas雪花效果核心代码分享
话不多说,请看代码:

创新互联自2013年创立以来,是专业互联网技术服务公司,拥有项目成都做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元海安做网站,已为上家服务,为海安各地企业和个人服务,联系电话:13518219792
var ca = document.getElementById("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 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 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!
本文名称:canvas雪花效果核心代码分享
文章源于:http://www.jxjierui.cn/article/jcoosh.html


咨询
建站咨询
