专栏首页葫芦cssjshtml 字符串散射

cssjshtml 字符串散射

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 让所有网页变成RSS —— Huginn

    下面开始举例子。我们现在要把我的博客 http://walkginkgo.com/转换成 RSS。

    huginn 中文网
  • SASS安装和WebStorm的配置

    用户1065635
  • 如何通过RSS订阅知乎

    前些天分享了一篇高效订阅微信公众号的方法 – 如何高效地订阅微信公众号,里面介绍了四种方法,分别是即刻、轻芒阅读、一览和RSS,前面三种方法主要是借助已有的AP...

    huginn 中文网
  • GitHubDaily 周报第 96 期

    GitHub:https://github.com/huangjianke/Gitter

    GitHubDaily
  • 如何更有效率和质量地开发Vue项目

    自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-...

    用户1065635
  • Web 性能优化:21种优化CSS和加快网站速度的方法

    CSS 必须通过一个相对复杂的管道,就像 HTML 和 JavaScript一样,浏览器必须从服务器下载文件,然后进行解析并将其应用于DOM。由于优化程度极高,...

    前端小智@大迁世界
  • selenium的一些使用方法

    新建实例driver = webdriver.Chrome() 1.通过标签属性Id查找元素 方法:find_element_by_id(element...

    周小董
  • selenium webdriver的各种driver

    selenium官方加上第三方宣布支持的驱动有很多种;除了PC端的浏览器之外,还支持iphone、android的driver;大概记录一下selenium支持...

    周小董
  • Chrome 控制台新玩法console显示图片以及为文字加样式

    在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole...

    用户1065635
  • 使用hexo+github搭建免费个人博客详细教程

    新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名...

    良月柒

扫码关注云+社区

领取腾讯云代金券