html5 canvas 運行起來絕對讓你震撼！

標籤：style   blog   http   color   os   io   ar   for   art   

從一個大神那看到的，拷貝過來跟大家分享下！

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;}

css

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);})();

js

 

html5 canvas 運行起來絕對讓你震撼！