预览加载中，请您耐心等待几秒...

基于html5canvas实现漫天飞雪效果的方法.docx

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共16页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

基于html5canvas实现漫天飞雪效果的方法基于html5canvas实现漫天飞雪效果的方法导语：基于html5canvas实现漫天飞雪效果的方法，你懂吗？下面的是百分网小编为大家搜集的基于html5canvas实现漫天飞雪效果的'方法，运行该实例可以看到很棒的下雪效果。如下图所示：主要代码如下：代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""<ahref="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><htmlxmlns="<ahref="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>漫天飞雪</title><styletype="text/css">*{margin:0;padding:0;}</p><p>body{/*Youcanuseanykindofbackgroundhere.*/background:#6b92b9;}canvas{display:block;}</style></head></p><p><body></p><p><pstyle="background:#6b92b9;width:100%;height:2000px;"></p><canvasid="canvas"style="position:fixed;top:0px;left:0px;z-index:80;pointer-events:none;"></canvas></p><p><script>window.onload=function(){//canvasinitvarcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");//canvasdimensionsvarW=window.innerWidth;varH=window.innerHeight;canvas.width=W;canvas.height=H;//snowflakeparticlesvarmp=3000;//maxparticlesvarparticles=[];for(vari=0;i<mp;i++){particles.push({x:Math.random()*W,//x-coordinatey:Math.random()*H,//y-coordinater:Math.random()*3+1,//radiusd:Math.random()*mp//density})}//Letsdrawtheflakesfunctiondraw(){ctx.clearRect(0,0,W,H);ctx.fillStyle="rgba(255,255,255,0.8)";/*ctx.fillStyle="#FF0000";*/ctx.beginPath();for(vari=0;i<mp;i++){varp=particles[i];ctx.moveTo(p.x,p.y);ctx.arc(p.x,p.y,p.r,0,Math.PI*2,true);}ctx.fill();update();}//Functiontomovethesnowflakes//anglewillbeanongoingincrementalflag.SinandCosfunctionswillbeappliedtoittocreateverticalandhorizontalmovement