2015-02-09 1,237 views 评论

A very interesting View

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext(&#x27;2d&#x27;),
    
    cen = {x:w/2, y:h/2},
    radiant = 0,
    particles = [],
    particleCount = 1,
    frame = 0,
    middleCover = ctx.createRadialGradient(cen.x, cen.y, 0, cen.x, cen.y, 20);

middleCover.addColorStop(0, &#x27;rgba(0, 0, 0, .1)&#x27;);
middleCover.addColorStop(1, &#x27;rgba(0, 0, 0, 0)&#x27;);

function anim(){
  window.requestAnimationFrame(anim);
  
  update();
}
anim();

function Particle(){
  this.x = cen.x;
  this.y = cen.y;
  this.vx = Math.cos(radiant);
  this.vy = Math.sin(radiant);
  
  this.color = &#x27;hsl(rad, 80%, 50%)&#x27;
    .replace(&#x27;rad&#x27;, ((radiant/Math.PI)*180)|0);
}
Particle.prototype.update = function(){
  this.x += this.vx;
  this.y += this.vy;
  
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, 2, 2);
}
function update(){
  
  ctx.fillStyle = &#x27;rgba(0, 0, 0, .04)&#x27;;
  ctx.fillRect(0, 0, w, h);
  
  radiant += .1;
  radiant %= Math.PI*2;
  
  ++frame;
  if(frame &gt; particleCount){
    frame = 0;
    particles.push(new Particle);
  }
  
  for(var i = 0; i &lt; particles.length; ++i){
    var par = particles[i];
    par.update();
    
    if(par.x &gt; w || par.x &lt; 0 || par.y &gt; h || par.y &lt; 0){
      particles.splice(i, 1);
      --i;
    }
  }
  
  ctx.fillStyle = middleCover;
  ctx.beginPath();
  ctx.arc(cen.x, cen.y, 20, 0, Math.PI*2);
  ctx.fill();
}

document.addEventListener(&#x27;click&#x27;, function(){
  for(var i = 0; i &lt; 10; ++i) update();
})


for(var i = 0; i &lt; 100; ++i) update();