html5 canvas粒子形成下雪背景的效果

互联网 18-8-31

本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>canvas粒子形成下雪背景</title>     body{         margin: 0px;         padding: 0px;     }     #canvas{         display: block;         background: #222;     } </style> </head> <body>     <canvas id="canvas"></canvas> </body> <script>     var canvas = document.getElementById("canvas");//获取canvas     var ctx = canvas.getContext("2d");//创建画笔     var w = canvas.width = window.innerWidth;//浏览器宽度     var h = canvas.height = window.innerHeight;//浏览器高度     window.onresize = function(){         w = canvas.width = window.innerWidth;         h = canvas.height = window.innerHeight;     };//当浏览器刷新的时候刷新     var num = 1000;//数量     var shuju = [];//空数组     for(i = 0;i<num;i++){         shuju.push({//数组末项添加             x : Math.random()*w,              y : Math.random()*h,             r : Math.random()*2         });         draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循环循环darw function     };     console.log(shuju[0]);      function draw(x1,y1,r1){         ctx.beginPath();//开始绘画         ctx.fillStyle = "#fff";//颜色         ctx.arc(x1,y1,r1,0,2*Math.PI,false)//arc园         ctx.fill();//填充     }      function chageY(){         for(var i = 0;i<num;i++){//for循环             shuju[i].y += Math.random()*5;             if(shuju[i].y > h){//大于高度                 shuju[i].y = 0;//等于0             }             draw(shuju[i].x,shuju[i].y,shuju[i].r);//调取         }     }      setInterval(function(){         ctx.clearRect(0,0,w,h);//清楚画布 0 0 高度 宽度         chageY();      },10);  </script>

html5 canvas粒子形成下雪背景的效果

相关资讯

标签推荐