Chrome v65 将支持 CSS Paint API

Chrome v65 中将会支持 CSS Paint API。

什么是 CSS Paint？在说清这个概念之前先看下我们平时是如何设置一个元素背景的：background-image: url('...');或者linear-gradient()，分别是用引入图片或者 CSS 编程的方式，而 CSS Paint 则是用 JS 编程的方式，让你在 CSS 中能够引入用 JS 编写的图形。

啥也不说了，先看个例子，这个例子是给 元素加个背景，选 的原因是它可以缩放。

在上面的例子中，先定义一个叫 CheckboardPainter 的画板（Paint Worklet），并且将之注册为 "checkerboard"，然后通过 CSS.paintWorklet.addModule 的方法加载这个画板，这样就可以在 CSS 中用 paint(checkboard) 来给指定元素添加背景图了。效果图如下：

有人会问，这个效果背景图也能实现啊。CSS Paint 与背景图的差别就是背景是根据代码计算出来的，不会随着元素的大小变化而伸缩，并且对图像的修改仅仅通过修改代码就能实现，而不再需要跟设计同学要设计稿啦！

下面我们仔细讲解下这个 CSS Paint。

在画板类（Paint Worklet Class）中，有一个叫 paint 的回调函数，有三个参数：

ctx：熟悉 canvas 的对 context 一定不陌生，在这里你可以使用在 canvas 上一样的方式绘制图形；

geometry：包含画板的宽高信息；

properties：可以获取自定义元素属性，这么讲很抽象，拓展下刚刚的例子。

在 CheckerboardPainter 类中，给静态属性 inputProperties 定义了两个属性：--checkerboard-spacing 和 --checkerboard-size，这两个属性可以像一般的 CSS 的属性一样使用于 HTML 元素，而这两个属性的值将被 paint 的第三个参数 properties 获得，被用于生产图像。所以，如果修改 textarea 的 --checkerboard-spacing 或者 --checkerboard-size 属性，背景图将会发生改变，看下效果：