标签:rect date loop char class tle cti pad com
<!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>七彩泡泡</title> <style> html,body{ margin:0; padding:0; width:100%; height:100%; overflow: hidden; } </style> </head> <body> <canvas id="canvas"></canvas> <script> window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 20); }; })(); var mycanvas=document.getElementById("canvas"); var ctx=mycanvas.getContext("2d"); var W=window.innerWidth, H=window.innerHeight; mycanvas.width=W; mycanvas.height=H; var paintCanvas=function(){ ctx.fillStyle="rgba(0,0,0,1)"; //ctx.clearRect(0,0,W,H); ctx.fillRect(0,0,W,H); } var particleCount=200, particles=[]; function Particle(){ this.x=Math.random()*W; this.y=Math.random()*H; this.vx=-1+Math.random()*2; this.vy=-1+Math.random()*2; this.radius=Math.random()*20; this.color="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",1)"; //随机颜色 this.draw=function(){ ctx.fillStyle=this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); ctx.fill(); } } for(var i=0; i<particleCount;i++){ particles.push(new Particle()) } function draw() { paintCanvas(); for (var i = 0; i < particles.length; i++) { p = particles[i]; p.draw(); } update(); } function update() { for (var i = 0; i < particles.length; i++) { p = particles[i]; p.x += p.vx; p.y += p.vy; if(p.x + p.radius > W) p.x = p.radius; else if(p.x - p.radius < 0) { p.x = W - p.radius; } if(p.y + p.radius > H) p.y = p.radius; else if(p.y - p.radius < 0) { p.y = H - p.radius; } } } function animloop() { draw(); requestAnimFrame(animloop); } animloop(); </script> </body> </html>
canvas最简单的多粒子运动,可以更改圆形的大小,密度,运动速度,颜色等;
标签:rect date loop char class tle cti pad com
原文地址:https://www.cnblogs.com/xiaowu0371/p/11040669.html