JavaScript-效果【仿黑客帝国】

最新推荐文章于 2024-05-23 12:43:43 发布

刘佬汉

最新推荐文章于 2024-05-23 12:43:43 发布

阅读量181

点赞数

分类专栏： js效果

本文链接：https://blog.csdn.net/weixin_40152324/article/details/89204395

版权

js效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单js实现黑客帝国效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑客帝国效果</title>
<style>
*{margin: 0;padding: 0;}
canvas{display: block;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
document.addEventListener("DOMContentLoaded",function(){
var oC=document.getElementById("canvas"); // 获取画布
var gt=oC.getContext("2d");
//全屏
oC.width=window.innerWidth;
oC.height=window.innerHeight;
var font=16;
var txt="0123456789"; // 设置显示内容
txt=txt.split("");
//列数
var col=oC.width/font;
var arr=[];
//初始值
for(var i=0;i<col;i++){
arr[i]=1;
}
//输出文字
function show(){
gt.fillStyle="rgba(0,0,0,0.05)";
gt.fillRect(0,0,oC.width,oC.height);
gt.fillStyle="#0f0"; // 文字颜色
gt.font=font+"px arial";
for(var i=0;i<arr.length;i++){
//随机输出文字
var oT=txt[Math.floor(Math.random()*txt.length)];
//输出文字坐标
gt.fillText(oT, i*font, arr[i]*font);
//如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）
if(arr[i]*font>oC.height || Math.random() > 0.95)
arr[i] = 0;
//用于Y轴坐标增加
arr[i]++;
}
}
setInterval(show,30); // 调用定时器
},false)
</script>
</body>
</html>

刘佬汉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-效果【仿黑客帝国】

简单js实现黑客帝国效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>黑客帝国效果</title> <style> *{margin: 0;padding: 0;} ...
复制链接

扫一扫