黑客帝国代码雨

黑客帝国代码雨奉上,之前一直想写,但一直没抽出时间来,今天把他写了,也算了了装心事

效果图如下
在这里插入图片描述
原理就不讲了,代码写的很清楚而且不长
有不懂的评论区问我就好

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas代码雨</title><style>* {padding: 0;margin: 0;}canvas {display: block;width: 100vw;height: 100vh;background-color: black;}</style>
</head><body><canvas></canvas><script>const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');function init() {canvas.width = window.innerWidth * devicePixelRatiocanvas.height = window.innerHeight * devicePixelRatio}init()const fontSize = 10 * devicePixelRatioctx.font = fontSize + 'px Microsoft YaHei'const column = Math.floor(canvas.width / fontSize)const charIndex = new Array(column).fill(0)function draw() {ctx.fillStyle = 'rgba(0,0,0,0.1)'ctx.fillRect(0, 0, canvas.width, canvas.height)ctx.fillStyle = '#0f0'ctx.textBaseline = 'top'for (let i = 0; i < column; i++) {const text = getRandomChat()const x = i * fontSizeconst y = charIndex[i] * fontSizectx.fillText(text, x, y)if (y > canvas.height && Math.random() > 0.99) {charIndex[i] = 0} else {charIndex[i]++}}}function getRandomChat() {const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'return str.charAt(Math.floor(Math.random() * str.length))}draw()setInterval(draw, 30)</script>
</body></html>