&nbs p;
@L_ 360 _0@背景图片CSS P ai nt API 可以 简单 理解为（实际不能等同）把Canvas 画布 作为普通元素的背景图片。
也就是CSS的 background -i mage 就是一个Canvas，我们可以 利用 Canvas绝大多数API 绘制 各种复杂有趣的图形效果，以一种更高效的方式丰富web页面元素的视觉展现。例如，蓝色按钮不仅仅是个蓝色背景，上面还有白 云 漂漂的效果，想想就很棒！
二、一个简单的案例 了解 CSS Paint API
例如，我们希望创建一个透明 图片背景 。类似下面这样：
则完整的CSS代码和JS部分代码如下：
.box { width: 180px; h ei ght: 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) { // 这里就是绘制的代码了 .. .. } }); 以上就是CSS Paint API使用的固定套路：
CSS中paint( abc )； JS添加模块CSS.paintWork let .addModule(& # 8216;xxx.js’); xxx.js中代码套路固定，在下面注释位置写绘制代码即可；registerPaint('abc', class { paint(context, size, PR o PE rties) { // 绘制代码在这里.... } }); 其中 paint(context, size) 中的两个参数可以稍微介绍下：
context 为绘制上下文，全称是PaintRenderingContext2D，和Canvas的CanvasRenderingContext2D是近亲，API全部来自Canvas，一模一样， 不过 由于安全限制，有些Canvas中的有些API是不能使用的，可用和不可用的API见下表：| Canvas State | CanvasImageData |
| CanvasTransform | Canva SUSE rInterface |
| CanvasCompos IT ing | CanvasText |
| CanvasImag ESM oothing | CanvasTextDrawingStyles |
| CanvasFill stroke Styles | – |
| CanvasShadowStyles | – |
| CanvasRect | – |
| CanvasDrawPath | – |
| CanvasDrawImage | – |
| CanvasPathDrawingStyles | – |
| CanvasPath | – |
{ width: 180, height: 180 } size 的大小受到 background-size 属性大小的影响，因此，对于重复背景，可以借助background-repeat进行平铺循环， 不用 非得在绘制的JS代码中循环。例如，下面即将要展示的demo效果，也可以这么实现，CSS部分：
.box { width: 180px; height: 180px; background-image: paint(transparent-grid); background- Size: 16px 16px; } 然后，paint-grid.js中只需要填充白-灰-灰-白，4个格子就好了，无需循环。 properties 可以用来获得get到的 CSS属性 和属性值，包括 CSS变量 值；以及其他一些参数。
眼见为实，您可以狠狠地点击这里：CSS Paint API绘制透明格子作为背景demo（目前仅Ch rom e有效果）
效果如下截图：
paint-grid.js中的完整绘制代码如下：
registerPaint('transparent-grid', class { paint(context, size) { // 两个格子颜色 VAR color1 = '#fff', color2 = '#eee'; // 格子尺寸 var units = 8; // 横轴数轴循环遍历下 for (var x = 0; x < size.width; x += units) { for (var y = 0; y < size.height; y += units) { context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2; context.fillRect(x, y, units, units); } } } }); 补充：
类似格子这类重复背景，可以借助 background-repeat 进行平铺循环，不用非得在绘制的JS代码中循环，不过需要借助 background -s ize 属性帮助， 改变 绘制的尺寸。例如，上面demo效果，也可以这么实现，CSS部分：
.box { width: 180px; height: 180px; background-image: paint(transparent-grid); background-size: 16px 16px; } 然后，paint-grid.js中只需要填充白-灰-灰-白，4个格子就好了，无需循环。
registerPaint('transparent-grid', class { paint(context, size) { // 两个格子颜色 var color1 = '#fff', color2 = '#eee'; // 两个 白色 格子 context.fillStyle = color1; context.fillRect(0, 0, 8, 8); context.fillRect(8, 8, 8, 8); // 两个灰色格子 context.fillStyle = color1; context.fillRect(0, 4, 8, 8); context.fillRect(4, 0, 8, 8); } }); 要更通俗易懂些。
三、CSS变量让Paint API蓬荜生辉
上面的案例展示了CSS Paint API的基本使用，但是，虽然看上去新潮，但并没有体现出CSS Paint API有什么过人之处。
你想啊，我直接用JS加Canvas API绘制一个格子图案，转换成Base64，直接作为元素的背景图片显示，不也是一样的效果，而且兼容性更好（IE9+逗支持），所有Canvas API都能用，没有限制。对比一看，完全没有使用CSS Paint API的理由嘛！
没错！如果我们只是需要一个静态背景，真不如直接Canvas绘制再转换成Base64图片（
toDataURL()方法） 或者 Blob图片（toBlob()方法）。
CSS Paint API的优势在于： 其作为一个CSS属性值，渲染是实时的 ，自动跟着浏览器重绘的，因此，只要我们的绘制是和CSS变量相关联的，所有的渲染效果都会实时刷新重绘，这可就牛逼大了！
还是上面的透明格子例子，格子的颜色以及格子的尺寸，我们可以将其作为CSS变量提取出来，如下：
.box { width: 180px; height: 180px; --color1: #fff; --color2: #eee; --units: 8; background: paint(custom-grid); } 这些定义的变量我们可以在绘制的时候获取到，示意如下：
registerPaint('custom-grid', class { // 获取3个变量 stat ic get inputProperties() { return [ '--color1', '--color2', '--units' ] } paint(context, size, properties) { // 两个格子颜色 var color1 = properties.get('--color1').toString(); var color2 = properties.get('--color2').toString(); // 格子尺寸 var units = Number(properties.get('--units')); // 绘制代码，和之前一样... } }); 静态效果是一样的：
但是，如果我们修改了CSS代码中定义的 变量值 ，则，我们可以看到Paint背景图实时变化效果（见下GIF）：
眼见为实，您可以狠狠地点击这里：CSS变量外加Paint API绘制透明格子demo
无需额外的定时器，真实时渲染，控制非常方便。
配合CSS Prop erties & am p; Values API，把 --units 等变量全部注册为合法的CSS属性，则，我们就能使用 transition 和 animation 属性纯CSS控制Paint背景图的运动和动画了，按钮上云朵漂漂的效果完全不在话下。
这个案例以后再介绍。
四、Houdini，兼容与其他
本文介绍的CSS Paint API是CSS Houdini的一部分，最后提到的CSS Properties & Values API也是，是目前C hr ome已经支持的一部分API。CSS houdini可以自定义CSS属性，布局等，未来不可限量。
由于兼容性的问题，如果想要在实际项目中使用CSS Paint API，还需要做兼容处理，例如：
.box { width: 180px; height: 180px; background: url(data:image/png;base64,i vb ORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84 P3 79/ikGRhHDRgWYfDu3Tu86 ub QUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC); background: paint(transparent-grid, w hat ever); } CSS Paint API更适用于动态场景，适合实现需要实时绘制渲染的需求；如果是纯静态展示，直接就用JS加Canvas实现得了，没必要为了技 术 而技术。
CSS Houdini及其相关的新技术可玩的东西很多，以后有 机会 再多多介绍，本文就到这里，感谢您的阅读！
参考文档
https://www.w3. org /TR/css-paint-api-1/ https://css-houdini.rocks/ 最后的最后
最后，再说点其它你可能感兴趣的东西。对于本文的透明格子效果，其实最好的实现方法是直接CSS background 绘制，利用线性渐变和CSS3多背景。
代码如下：
.box { width: 180px; height: 180px; background-color: #fff; background-image: linear-gra die nt(45 deg , #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee); background-size: 16px 16px; background-position: 0 0, 8px 8px; } 实时效果如下：
尺寸控制非常方便，天然支持 animation 动画。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS届的绘图板CSS Paint API简介 全部内容，希望文章能够帮你解决 html5教程-CSS届的绘图板CSS Paint API简介 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS届的绘图板CSS Paint API简介的详细内容...