CSS届的绘图板CSS Paint API简介

一、把Canvas图片作为CSS背景图片

CSS Paint API可以简单理解为（实际不能等同）把Canvas画布作为普通元素的背景图片。

也就是CSS的background-image就是一个Canvas，我们可以利用Canvas绝大多数API绘制各种复杂有趣的图形效果，以一种更高效的方式丰富web页面元素的视觉展现。例如，蓝色按钮不仅仅是个蓝色背景，上面还有白云漂漂的效果，想想就很棒！

二、一个简单的案例了解CSS Paint API

例如，我们希望创建一个透明图片背景。类似下面这样：

则完整的CSS代码和JS部分代码如下：

.box {
width: 180px; height: 180px;
/* transparent-grid自己命名 */
background-image: paint（transparent-grid）；
}

然后绘制图形的JS务必作为模块引入，例如，建一个名为paint-grid.js的文件，在页面上引入：

if （window.CSS） {
CSS.paintWorklet.addModule（'paint-grid.js'）；
}

paint-grid.js文件代码如下：

// transparent-grid命名和CSS中的对应
registerPaint（'transparent-grid', class {
paint（context, size） {
// 这里就是绘制的代码了…
}
}）；