canvas——几行代码实现字体下落效果

最新推荐文章于 2024-07-25 16:45:28 发布

xulianghh

最新推荐文章于 2024-07-25 16:45:28 发布

阅读量1.1k

点赞数

文章标签： canvas html5

本文链接：https://blog.csdn.net/xulianghh/article/details/8685854

版权

<!DOCTYPE html>
<html>
<head></head>

<body style=margin:0>
  <canvas id=q />
  <script>
	var q=document.getElementById('q'),
		s=window.screen,
		w=q.width=s.width,
		h=q.height=s.height,
		//拆分成255个1组成的字符数组
		p=Array(256).join(1).split(''),
		c=q.getContext("2d"),
		m=Math;
	//每隔33毫秒执行一次function
	setInterval(function(){
		c.fillStyle="rgba(0,0,0,0.05)";
		//将画布充满整个页面
		c.fillRect(0,0,w,h);
		c.fillStyle="rgba(0,255,0,1)";
		//map(callback)函数用于将数组中的字符按照callback函数转换
		p=p.map(function(v,i){
			//fillText(字符串,x坐标,y坐标)
			//fromCharCode(Unicode编码)
			c.fillText(String.fromCharCode(m.floor(2720+m.random()*33)),i*10,v);
			v+=10;
			//y坐标大于一个超出768的随机数就设置为0
			if(v>768+m.random()*10000)
				v=0;
			return v;
		});
	},33);
  </script>
</body>
</html>

xulianghh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas——几行代码实现字体下落效果

var q=document.getElementById('q'), s=window.screen, w=q.width=s.width, h=q.height=s.height, //拆分成255个1组成的字符数组 p=Array(256).join(1).split(''), c=q.getContext("2d"), m=Math; //每隔33毫秒执行一次
复制链接

扫一扫