Canvas如何做个雪花屏版404的实现

先容

过往，电视用天线接收信号，没信号出雪花屏，刺啦刺啦作响，然后赶紧扶正想办法让他找到信号。当时电脑还常常连上小霸王打游戏，魂斗罗，超等玛丽，坦克大战。。。时间如白驹过隙，科技进步的飞快，现在都用网络电视了再也不会出现那种环境了，但那真是段令人怀念的时光。

我们今天的主题就是做一个雪花屏版的404页面，我们404找不到页面不就是当年没信号让你去扶正找信号一样的活么，这次我们还是用canvas技能去实现他，还会用到微量的css，结果下图：

本期我们会从根本结构，绘制雪花屏，css3渐变，绘制笔墨，绘制波段几个方面去报告这个项目。

出发

1.根本结构

我们先写好html,在里面我们用module模式，方面后面的模块加载。

再写好css的基本样式，这里我们让里面的元素都是全屏表现的。

接下来，我将要写主逻辑了：

绘制方面的内容我们随后会开展，目前做的事就是拿到画布给其赋予宽高让其铺满每次监听都可以改变其宽高，别的，其实也不停在重绘实行中，尽管他里面没有东西空白一片。

2.绘制雪花屏

我们想让画布里面有点东西，先绘制雪花配景吧，以是我们先要分析雪花屏是如何产生的。
其实也不难，就是我们先要拿到当前画布内所有点的色值信息，对其修改成随机灰度值，当不停绘制的时间，便呈现出雪花不停闪动。

这一步我们就是期望再每次屏幕改变的时间都能拿到他的画布图片数据。imgData里面有个data信息，里面存储了一个Uint8ClampedArray，他里面临应的是点的色值信息，每隔从0到3分别代表红，绿，蓝，透明度的信息。
接下来，我们将利用这些信息搞点事情出来：

我们拿到了信息中的data让每一个色值都改酿成一个随机具有灰度的值。再利用putImageData再次对当前矩形也就是整个画布举行绘制，如许雪花屏就出现了~~

3.圆形渐变

但是，看着花屏太白了，没那种电视框起来那种味道，以是我们用css3在容器写一个渐变配景的伪类覆盖上。中心稍留一点白，为了让后面的主题笔墨更加让人一目了然。固然，你也可以在画布上绘制一个渐变上去，同样可以实现结果。

是不是瞬间感觉好多了~

4.绘制笔墨

这里在绘制前先要改变他的透明度，让他有规律的一闪一闪，就是他让从0不停累加其透明度到达临界值时其再取反，反之亦然。后面的绘制也很简单，让他居中表现在屏幕中心加点投影罢了，这里不做过多赘述。

现在我们的已经可以看到字体动画了，别着急，为了更加的逼真，我们隔一段时间再天生一个波段矩形，让人感觉到信号不稳定，跟字体闪动的动画相辅相成。

5.绘制波段

这里我们设置每隔一个阶段自动绘制一个矩形，他的透明周期和笔墨的成负相干，笔墨透明度越高他的就会月低，使其主题笔墨更加显着。
里面的offset变量是为了波段履历的偏移位置，使其不中断的往下移动。后面就是正常的绘制矩形再略微加些投影，更加逼真。

讲到这里我们就做完了，还挺简单的吧，一下子就回到童年了，在线演示

拓展与延伸

本期，其本质上还是通过getImageData与putImageData一次连合利用，固然我们也不仅限于此，可以遐想到各种各样的结果。还有，其实我们还可以把字体做高斯含糊算法去处置惩罚等这类操作，更加有特点。

注意：雪花屏会让用户的眼睛很快疲劳，影响健康，以是目标是让用户赶紧想办法换了，找到精确页面。开辟者做的时间千万，别长期盯着看，否则会有不适，呃~

到此这篇关于Canvas如何做个雪花屏版404的实现的文章就先容到这了,更多相干Canvas雪花屏版404内容请搜刮脚本之家以前的文章或继承欣赏下面的相干文章，盼望大家以后多多支持脚本之家！