JS实现炫酷的黑客帝国效果
原创
今天正好在阿里云导出数据库的时候看到了这个效果，就把代码扒下来了~
以下为完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="my_canvas"></canvas>
</body>
</html>
<script type="text/javascript">
var c = document.getElementById("my_canvas");
var ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;
var txts = "01";
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
var drops = [];
for(var x = 0; x < columns; x++) {
drops[x] = 1;
}
function draw()
{
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
for(var i = 0; i < drops.length; i++)
{
var text = txts[Math.floor(Math.random()*txts.length)];
ctx.fillText(text, i*font_size, drops[i]*font_size);
if(drops[i]*font_size > c.height || Math.random() > 0.95)
drops[i] = 0;
drops[i]++;
}
}
setInterval(draw, 33);
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读