HTML5 黑客帝国文字矩阵

最新推荐文章于 2024-05-17 09:11:49 发布

ZNE、

最新推荐文章于 2024-05-17 09:11:49 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_38503329/article/details/79288901

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字雨</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
</style>

</head>
<body>


<embed width="500" height="100" src="musics/1.mp3" loop="2"></embed>
<canvas id="mycanvas" width="450" height="450"></canvas>
<script>
//js code
//获取屏幕分辨率
var s = window.screen;
var width = s.width;
var height = s.height;

//获取画布对象
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

//设置画布宽高
canvas.width = width;
canvas.height = height;

//定义要显示的文字内容
var str = "我先静静";
//设置文字字体大小
var fontSize = 24;

//计算页面总列数
var cols = Math.floor(width/fontSize);

//保存每列文字的纵坐标的数组(因为要设置纵坐标动态改变) 初始化纵坐标
var drops = [];
for(var i=0; i<cols; i++)
drops.push(0);

//绘画函数
function draw(){
//开头设置一个rgba的颜色用于设置文字清楚之前显示的颜色虚化
context.fillStyle = "rgba(0,0,0,0.035)";
context.fillRect(0,0,width,height);
//设置文字样式
context.font = "600 "+fontSize+"px 微软雅黑";
//文字实际颜色
context.fillStyle = randomColor();
for(var i=0;i<cols;i++){
//指定每列随机显示的汉字位置
var index = Math.floor(Math.random()*str.length);
//设置每列文字的位置
var x = i*fontSize;
var y = drops[i]*fontSize;
//绘制文字
context.fillText(str[index],x,y);
//判断是否已经走到底了
if(y>width&&Math.random()>0.994){
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw,33);
function randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>

ZNE、

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 黑客帝国文字矩阵

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文字雨&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0; } body{ overflow
复制链接

扫一扫