<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> body{ background: #45aad7; margin: 0%; padding: 0%; } html,body{ width: 100%; height: 100%; } #myCanvas{ width: 100%; height: 100%; } </style> </head> <body> <canvas id="myCanvas" width="1000" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var particles = []; for(var i = 0; i < 500; i++){ particles.push({ //雪花在x y 上的位置和速度,以及雪花的大小和颜色 x: Math.random()*window.innerWidth, y: Math.random()*window.innerHeight, vx: (Math.random()*1-.5), vy: (Math.random()*1-.5), size: 1+Math.random()*2, // color: "#FFF" color:'#'+('0000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6) }); } function timeUpdata(e){ /*清楚画布区域*/ context.clearRect(0,0,window.innerWidth,window.innerHeight); /*逐一绘制500片雪花*/ var len = particles.length; var particle; for(var i = 0; i < 500; i++){ particle = particles[i]; particle.x += particle.vx; particle.y += particle.vy; if(particle.x<=0 || particle.x>=window.innerWidth){ particle.vx *= -1; } if(particle.y<=0 || particle.y>=window.innerHeight){ particle.vy *= -1; } context.fillStyle = particle.color; //设置雪花的颜色 context.beginPath(); context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true); context.closePath(); context.fill();// 填充颜色 } } setInterval(timeUpdata, 40);//每40ms执行一次timeUpdate函数 </script> </body> </html>
canvas粒子动画效果
猜你喜欢
转载自blog.csdn.net/qq_22317389/article/details/80076195
今日推荐
周排行