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

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

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

本期我们会从基础结构，绘制雪花屏，css3渐变，绘制文字，绘制波段几个方面去讲述这个项目。

出发

1.基础结构

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

<div class="content">
    <canvas id="canvas"></canvas>
</div>
​
<script type="module" src="./app.js"></script>

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

* {
    padding: 0;
    margin: 0;
}
html,
body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    font-size: 12px;
}
#canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.content {
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

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

/*app.js*/
class Application {
  constructor() {
    this.canvas = null;             // 画布
    this.ctx = null;                // 环境
    this.w = 0;                     // 画布宽 
    this.h = 0;                     // 画布高
    this.offset = 0;                // 波段偏移位置
    this.imgData = null;            // 画布图信息
    this.text = "404";              // 绘制文字
    this.alpha = 0;                 // 透明度
    this.alphaNum = 0.005;          // 透明度衰减值
    this.alphaMax = 0.35;           // 透明度极值
    this.init();
  }
  init() {
    // 初始化
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext("2d");
    window.addEventListener("resize", this.reset.bind(this));
    this.reset();
    this.render();
  }
  reset() {
    // 屏幕改变调用
    this.w = this.canvas.width = this.ctx.width = window.innerWidth;
    this.h = this.canvas.height = this.ctx.height = window.innerHeight;
  }
  render() {
    // 主渲染
    this.step();
  }
  drawBackground() {
    // 绘制雪花屏
  }
  drawFrame(delta) {
    // 绘制波段
  }
  drawText() {
    // 绘制文字
  }
  step(delta) {
    // 重绘
    const {w, h, ctx} = this;
    requestAnimationFrame(this.step.bind(this));
    ctx.clearRect(0, 0, w, h);
    this.drawBackground();
    this.drawText();
    this.drawFrame(delta);
  }
}​
window.onload = new Application();

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

2.绘制雪花屏

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

/*app.js*/
reset() {
    this.w = this.canvas.width = this.ctx.width = window.innerWidth;
    this.h = this.canvas.height = this.ctx.height = window.innerHeight;
    this.changeImgData()
}
changeImgData() {
    const {w, h, ctx} = this;
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, w, h);
    ctx.fill();
    return this.imgData = ctx.getImageData(0, 0, w, h);
}

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

/*app.js*/
drawBackground() {
    const {ctx, imgData} = this;
    for (let i = 0, data = imgData.data; i < data.length; i += 4) {
        let color = Math.floor(Math.random() * 255) + 50;
        data[i] = color;
        data[i + 1] = color;
        data[i + 2] = color;
    }
    ctx.putImageData(imgData, 0, 0);
}

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

5.绘制波段

drawFrame(delta) {
    this.offset = delta / 10;
    const {w, h, ctx} = this;
    for (let y = -h / 5, v = h / 5; y < h; y += v) {
      ctx.fillStyle = `rgba(0,0,0,${(this.alphaMax - this.alpha) / 8 + 0.02})`;
      ctx.shadowColor = "black";
      ctx.shadowBlur = 20;
      ctx.fillRect(0, y + this.offset % v, w, v / 2);
    }
  }