Matrix 矩阵 JavaScript代码生成器

作者:J.sky · 发表于:
2023-06-07T21:14:38.000000Z
· 更新于:
2023-08-13T22:54:57.614617Z
· Tag: JavaScript

Matrix 矩阵 JavaScript代码生成器

今天写了个Matrix 矩阵 JavaScript代码生成器,其实几年前就用Python的pygame实现过一个Matrix,最近在玩JavaScript canvas,索性使用JavaScript原生代码又撸了一遍,并且做了个代码生成器,方便修改Matrix的一些参数。

matrix动画原理

制作matrix动画是一个很有意思的过程,涉及到数组的一些基本操作,还有就是数组的循环和遍历,需要用到JavaScript数组中的一些方法,查看代码对于初学者来说可以学到一些很基础的知识。

matrix就是一个二位数组,[[a,b],[a,b],[a,b]]整个下落的字符就是这个二位数组,其中下落的每一列就是这个大数组中的一个小数组,每个字符就是小数组的一个元素。

我们定义每列下落的字符串样式、起始位置和下落的速度不一样,既可以达到视差效果,每列字符串消失后,就会自动创建一个新的字符串列,这样就会源源不断的下落。

理论上就是这样了,关于JavaScript canvas,只需了解文字绘制和动画的循环,就可以开始至编写代码了,具体的代码就不贴了,有需要的可以在下边的网址上自动生成。

相关资源

Matrix 矩阵 JavaScript代码生成器

Matrix 代码生成器的仓库