首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml 字符串散射

cssjshtml 字符串散射

作者头像
葫芦
发布2019-04-17 11:12:53
4090
发布2019-04-17 11:12:53
举报
文章被收录于专栏:葫芦葫芦
<canvas id='c'></canvas>
<script type="text/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 	= "王梓";
		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();
})();
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/09/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档