canvas喷泉

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var anim = {

init: function(){
		var canvas 		= document.getElementById('c');
		canvas.width 	= window.innerWidth;
		canvas.height 	= window.innerHeight;
		this.c 			= canvas.getContext('2d');
		this.letters 	= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		this.gravity 	= 0.1;
    this.maxParticles = 100;
		this.cw			= canvas.width,
		this.ch			= canvas.height,
		this.particles	= []
	},

render: function(){
		this.fadeCanvas();

var particle = {
			  x: 		anim.cw/2, 
		    y: 		anim.ch,
		    xSpeed: (Math.random()*20)-10,
		    ySpeed: (Math.random()*20)-10,
		    size: 	10,
		    character: anim.letters[Math.floor( Math.random() * anim.letters.length )],
		    color: 	[155, 100, 50, .7]
		}

this.particles.push(particle);
    this.tidyParticles();
		this.drawParticles();
	},

drawParticles: function(){
		var paritcleCount = this.particles.length;
		var c = this.c;
    for(var i=0; i < paritcleCount; i++){
		    var particle = this.particles[i];
        var h = particle.color[0],
            s = particle.color[1] + '%',
            l = particle.color[2] + '%',
            a = particle.color[3];
      
        var hsla = 'hsla(' + h + ',' + s + ',' + l + ',' + a + ')';
      
		    c.font = "12px sans-serif";
		    c.fillStyle = hsla;
		    c.fillText(particle.character, particle.x, particle.y);
		  
		    particle.x += particle.xSpeed;
		    particle.y += particle.ySpeed;
		    particle.size *= 0.96;
		    particle.y *= 0.98;
        particle.color[2] *= 0.99;
        particle.color[0] += 1;
        if(particle.color[0] > 253){
          particle.color[2] = 100;
          particle.color[3] = 1;
        }
    }
	},
  
  tidyParticles: function(){
    if( this.particles.length > this.maxParticles ){
      this.particles.shift();
    }
  },

fadeCanvas: function(){
		this.c.fillStyle = 'rgba(0,0,0,0.1)';
  		this.c.fillRect(0, 0, this.cw, this.ch);
	}
}

anim.init();
(function animloop(){
  requestAnimFrame(animloop);
  anim.render();
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg