如何用WebGL制作网格背景效果？

前言 作为前端开发人员，我们最关注的就是应用的交互体验，而元素背景是最基础的交互体验之一。一般而言，能够使用代码实现的界面，我们都会尽可能减少图片的使用，这主要是有几方面的原因，第一，是图片会消耗更多的带宽，对于移动端或者网络信号较差时的体验不够友好，第二是不够便捷，在使用图片的情况下即使有细微的调整也需要重新做图上传，第三是不够灵活，这一点主要体现在根据不同的条件需要呈现不同的效果。 本文就使用网格背景作为例子，来通过代码实现，这是在可视化课程中新学的内容，这里我做一个总结和复习。网格背景是一种常见的设计元素，它可以为网页增添一种现代感和动态感。要实现网格背景，我们可以使用CSS代码来实现，这类实现方式我在很多文章中都有看到过，但除了使用CSS，我们还可以通过WebGL实现，通过WebGL来实现，还能额外带来一些好处，比如有更好的性能，也能与画布上的其他元素更好地融合。 网格背景 在使用具体的代码实现之前，我们先简单来分析一下网格背景。 从上面的图片中我们能发现，网格背景其实可以看作是一个小的网格图案重复了n遍而形成的一个背景，也就是说这是一个重复图案的背景。 使用CSS实现 在使用WebGL来实现网格背景之前，我们还是先来看一下CSS代码是如何实现的。 在使用CSS代码实现网格背景时，需要用到CSS中的渐变函数，因为渐变函数最终形成的效果类似于图像，所以可以当作图像来使用，也就是说可以应用于background-image属性。渐变函数有三种：线性渐变、径向渐变和圆锥渐变，在这个例子中，由于网格是直线的，所以我们使用线性渐变函数就可以了。 线性渐变的语法比较简单，以下是MDN给出的表达式： <linear-gradient()> = linear-gradient( [ <linear-gradient-syntax> ] ) <linear-gradient-syntax> = [ <angle> | to <side-or-corner> ]? , <color-stop-list> <side-or-corner> = [ left | right ] || [ top | bottom ] <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]# <linear-color-stop> = <color> <length-percentage>? <linear-color-hint> = <length-percentage> <length-percentage> = <length> | <percentage> 我们主要向线性渐变函数传递三类参数：第一是渐变的方向，第二是初始色值，第三是最终色值。如果要控制得更细致，我们还可以通过上述公式中的length或者percentage来控制某个色值的范围，或者设置多个阶梯色值。 现在我们就可以通过以下CSS代码，来实现网格背景的设置。 .grid-bg { width: 300px; height: 300px; background-image: linear-gradient(to right, transparent 95%, #ccc 0), linear-gradient(to bottom, transparent 95%, #ccc 0); background-size: 8px 8px, 8px 8px; } 以上代码中首先使用background-size属性指定了一个网格图案的大小，然后我们知道background-repeat属性的默认值是repeat，所以会重复这个图案来铺满整个元素的背景，最后我们来看background-image这个属性，我们使用了线性渐变函数来给这个属性赋值，可以看到这里用了两个渐变函数。 第一个渐变函数，设置的渐变方向是to right，也就是自左向右进行渐变，初始色值是transparent也就是透明色，这里使用了百分数95%来控制透明色的范围，也就是说从0%的位置开始到95%的位置，都是透明色，然后最终色值是#ccc也就是灰色，我们想要95%到100%的范围都是#ccc的灰色，可以直接简写为0。