用HTML5和JavaScript实现黑客帝国风格的字符雨效果

目录

一、程序代码

二、代码原理

三、运行效果

一、程序代码

body {margin: 0;padding: 0;background: #000000;/* 设置背景颜色为黑色 */overflow: hidden;/* 隐藏溢出部分 */}canvas {display: block;/* 设置画布为块级元素 */}var canvas = document.getElementById("canvas");// 获取画布元素var ctx = canvas.getContext("2d");// 获取画布上下文var s = window.screen;// 获取屏幕信息var w = s.width;// 获取屏幕宽度var h = s.height;// 获取屏幕高度canvas.width = w;// 设置画布宽度为屏幕宽度canvas.height = h;// 设置画布高度为屏幕高度var fontSize = 14;// 设置字符大小var clos = Math.floor(w / fontSize);// 计算每行字符数var drops = [];// 存储水滴位置的数组var str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";// 设置用于显示的字符集for (var i = 0; i < clos; i++) {// 初始化水滴位置数组drops.push(0);}function drawString() {ctx.fillStyle = "rgba(0,0,0,0.05)";// 设置填充颜色ctx.fillRect(0, 0, w, h);// 用指定颜色填充整个画布ctx.font = "600 " + (Math.random() * 15 + 10) + "px Arial";// 设置字体样式和大小ctx.fillStyle = "#00ff00";// 设置字符颜色为绿色for (var i = 0; i  h && Math.random() > 0.99) {// 如果字符超出屏幕并且随机数大于0.99drops[i] = 0;// 将该列的字符位置重置为0}drops[i]++;// 增加字符位置，实现字符下落效果}}setInterval(drawString, 30);// 每隔30毫秒调用一次drawString函数，实现动画效果

二、代码原理

这段代码实现了一个基于 HTML5 和 JavaScript 的字符雨效果，类似于电影《黑客帝国》中的场景。下面是对代码的解析：

1. 在 HTML 部分：

   • 标签用于绘制字符雨效果。
   • 通过内联样式和 id 属性设置画布的背景色和标识符为 “canvas”。

2. 在 JavaScript 部分：

   • 获取了屏幕的宽度和高度作为画布的尺寸。
   • 定义了字符大小、每行字符数、水滴数组以及用于显示的字符集。
   • 创建了drawString函数，用于绘制字符雨效果：
     • 设置画布的填充颜色为半透明黑色，用于实现字符尾迹效果。
     • 随机设置字体样式和大小，并将字符颜色设为绿色。
     • 遍历每一列，根据当前水滴位置在该列绘制随机字符，并控制字符下落效果。
     • 当字符超出屏幕且随机数大于0.99时，重置该列字符位置。
   • 使用setInterval函数每隔30毫秒调用drawString函数，实现字符雨动画效果。

三、运行效果