您的位置：首页 > 编程语言

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

2013-03-18 10:10 477 查看

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

相关文章推荐

新的分享

章节导航