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) }) } } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!