<!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>
canvas——几行代码实现字体下落效果
最新推荐文章于 2024-07-25 16:45:28 发布