黑客帝国 - 矩阵雨

咦，那么我们可不可以扩展下，整一个 黑客帝国矩阵雨的效果 呢？

答案是肯定的，下面来整活。

该效果主要完成的功能有两点：

• 矩阵雨绘制
• 红蓝药丸编写

矩阵雨绘制

我们同样使用 canvas 来实现。基本思路如下：

• 初始化画布，画笔
• 初始化矩阵雨有多少列
• 用 0 和 1 的初始化绘制的字符串
• 在画布上绘制，以随机的 0 和 1 填充，计算绘制的 x 和 y 轴的距离，并重复绘制
• 监听视图窗口的更改，更新画布的大小和矩阵雨多少列的数据

实现的代码不多，这里贴上 JavaScript 文件的代码。代码即文档，若难以理解，请结合代码中的注释去学习。

(function() {let canvas = document.getElementById('canvas'); // 画布let ctx = canvas.getContext('2d'); // 画笔let width = canvas.width = window.innerWidth; // 设置 canvas 的大小，然后赋值给 width，方便后面的计算let height = canvas.height = window.innerHeight;let font = 12;let cols = 0;let dys = []; // 垂直距离的移动距离数组let matrix = '';let matrixSize = 20; // 矩阵雨的随机数量for(let i = 0; i < matrixSize; i += 1) {matrix += Math.floor(Math.random() * 2);}