本篇文章给大家带来的内容是关于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） {// 这里就是绘制的代码了…}}）；
