Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。我也是参考网上完成的看一下canvas绘制雪花飘落例图：
代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta chartset="UTF-8"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> *{margin:0; padding:0;} canvas{background:black;} </style> </head> <body> <canvas id="canvas">您的浏览器不支持canvas画布</canvas> <script> var can=document.getElementById('canvas'); var ctx=can.getContext('2d'); var wid=window.innerWidth; var hei=window.innerHeight; can.width=wid; can.height=hei; var snow=100; //雪花数量 var arr=[]; //保存雪花坐标，半径 for(var i=0; i<snow;i++){ arr.push({ x:Math.random()*wid, y:Math.random()*hei, r:Math.random()*7 }) } function DrawSnow(){ ctx.clearRect(0, 0, wid, hei); ctx.beginPath(); for(var i=0; i<snow;i++){ var p=arr[i]; ctx.moveTo(p.x,p.y) ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false) ctx.fillStyle="white"; } ctx.fill(); ctx.stroke(); SnowFall() ctx.closePath(); } //雪花飘落 function SnowFall(){ for(var i=0; i<snow; i++){ var p=arr[i]; p.y+=Math.random()*50+1; if(p.y>hei){ p.y=0; } p.x+=Math.random()*50+1; if(p.x>wid){ p.x=0; } } } setInterval(DrawSnow, 100); </script> </body> </html>转载于:https://www.cnblogs.com/yscode/p/7007237.html
相关资源：html5canvas制作3D逼真冬天雪景雪花飘洒动画特效