黑客帝国 - 矩阵雨

最新推荐文章于 2023-05-09 09:11:44 发布

VIP文章蚂蚁二娘

最新推荐文章于 2023-05-09 09:11:44 发布

阅读量204

点赞数

文章标签：矩阵线性代数

本文链接：https://blog.csdn.net/web2022050901/article/details/128896594

版权

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

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

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

矩阵雨绘制
红蓝药丸编写

矩阵雨绘制

我们同样使用 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 = []