代码雨代码大全，代码雨代码这个很多人还不知道,现在让我们一起来看看吧！

1、代码雨特效教程 更文时间：2018/04/08　　新的尝试　　尝试一下新的写作吧，这是第一篇技术类的文章（笔记…），以后可以也会继续更。

2、希望自己能写得出小白也能看得懂的东西。

(资料图片)

3、（当然最重要的是自己懂啦..hhhh）　　代码雨特效　　相信大家都看过黑客帝国，代码雨的特效给人留下了比较深的印象，那么，这样的特效用代码是怎样写出来的呢？　　其实，代码也非常简单啦。

4、万物皆有其属性以及规律，我们要做的就是把这个特效的属性以及规律用代码表示出来。

5、一起来看看吧。

6、　　作图之前，第一步当然是要准备“画布”啦：　　然后我们定义画布的大小=网页窗口的大小：　　准备工作做好，我们就可以分析特效中的元素啦。

7、首先要定义的就是屏幕里掉落那些数字，我们希望掉落数字1-9　　接下来，设置数字的大小，以及计算屏幕能够放多少列。

8、这里我们设置大小为16个像素，用屏幕宽度除以数字大小得到列数。

9、　　那么数字从哪里开始掉落呢？我们希望从最顶部开始掉落，于是我们还需要另一个数组来进行一下初始化，这个就是得到每一列y轴的坐标啦。

10、　　好了，这些做好之后，我们就该开始绘制数字效果啦！　　之前我们定义了我们需要的数字，我们希望随机抽取一个，然后每一列都在窗口顶部开始。

11、还记得我们刚才的初始化吗，输出文字时使用fillText()可以指定元素位置，i* font_size , drop[i] * font_size，就是指的每一列开始的横坐标与纵坐标啦　　到目前为止我们已经成功做出来一张可以铺满全屏的数字代码，但是这不并不是我们想要效果。

12、　　我们希望数字绘满一页后可以从头再开始画，同时我们还希望每一列代码长短不一——这个可以通过设置随机数来实现，比如当随机数大于0.9就重新开始绘制。

13、　　这样循环效果是出来了，但是还是不好看，我们可以通过增添样式，让他好看一点，　　好，这样一来，完整的数字特效代码就写出来了：　　接下来就只需要让他无限循环下去就好啦！　　这样就…等等，还没有结束，还记得之前我们定义了画布的大小=窗口的大小吗，当我们打开的时候他会计算你第一次打开时窗口的大小，当我们改变窗口大小的时候，图画是不会跟着变的。

14、　　于是我们还需要在window上添加onresize事件，浏览器窗口改变时重新计算canvas的大小：　　这样才算真的大功告成！怎么样，是不是很简（cai）单（guai）呢！THE END免责声明：本文来自腾讯新闻客户端自媒体，不代表腾讯网的观点和立场。

本文到此分享完毕，希望对大家有所帮助。

标签：