html5 canvas 运行起来绝对让你震撼!
从一个大神那看到的,拷贝过来跟大家分享下!
html
<canvas></canvas>
*{margin:0;padding:0;}body{background:#222;}
canvas{
position:absolute;
border:5px solid rgba(255,255,255,0.1);
box-shadow:inset 0 0 100px #4162a9;
}
var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), particles = [], patriclesNum = 500, w = 500, h = 500, colors = ['#f35d4f','#f36849','#c0d988','#6ddaf1','#f1e85b']; canvas.width = 500; canvas.height = 500; canvas.style.left = (window.innerWidth - 500)/2+'px'; if(window.innerHeight>500) canvas.style.top = (window.innerHeight - 500)/2+'px'; function Factory(){ this.x = Math.round( Math.random() * w); this.y = Math.round( Math.random() * h); this.rad = Math.round( Math.random() * 1) + 1; this.rgba = colors[ Math.round( Math.random() * 3) ]; this.vx = Math.round( Math.random() * 3) - 1.5; this.vy = Math.round( Math.random() * 3) - 1.5; } function draw(){ ctx.clearRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter'; for(var i = 0;i < patriclesNum; i++){ var temp = particles[i]; var factor = 1; for(var j = 0; j<patriclesNum; j++){ var temp2 = particles[j]; ctx.linewidth = 0.5; if(temp.rgba == temp2.rgba && findDistance(temp, temp2)<50){ ctx.strokeStyle = temp.rgba; ctx.beginPath(); ctx.moveTo(temp.x, temp.y); ctx.lineTo(temp2.x, temp2.y); ctx.stroke(); factor++; } } ctx.fillStyle = temp.rgba; ctx.strokeStyle = temp.rgba; ctx.beginPath(); ctx.arc(temp.x, temp.y, temp.rad*factor, 0, Math.PI*2, true); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(temp.x, temp.y, (temp.rad+5)*factor, 0, Math.PI*2, true); ctx.stroke(); ctx.closePath(); temp.x += temp.vx; temp.y += temp.vy; if(temp.x > w)temp.x = 0; if(temp.x < 0)temp.x = w; if(temp.y > h)temp.y = 0; if(temp.y < 0)temp.y = h; } } function findDistance(p1,p2){ return Math.sqrt( Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) ); } window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); (function init(){ for(var i = 0; i < patriclesNum; i++){ particles.push(new Factory); } })(); (function loop(){ draw(); requestAnimFrame(loop); })();
耐得住寂寞,守得住繁华