此页面由 Cloud Translation API 翻译。

CSS Paint API

Surma

Chrome 65 中的新功能

从 Chrome 65 开始，CSS Paint API（也称为“CSS 自定义绘制”或“Houdini 的绘制 worklet”）默认处于启用状态。Google 优惠是什么？您可以使用它做些什么？它的工作原理是什么？请继续阅读，你会不会...

借助 CSS Paint API，您可以在 CSS 属性需要时以编程方式生成图像。background-image 或 border-image 等属性通常与 url() 搭配使用来加载图片文件，或与 CSS 内置函数（如 linear-gradient()）搭配使用。现在，您可以使用 paint(myPainter) 来引用 Paint worklet，而不是使用它们。

编写 Paint Worklet

如需定义名为 myPainter 的绘制工作流，我们需要使用 CSS.paintWorklet.addModule('my-paint-worklet.js') 加载 CSS 绘制工作流文件。在该文件中，我们可以使用 registerPaint 函数来注册绘制 worklet 类：

class MyPainter {
  paint(ctx, geometry, properties) {
    // ...
  }
}

registerPaint('myPainter', MyPainter);

在 paint() 回调内，我们可以使用 ctx，使用方式与使用 CanvasRenderingContext2D（与 <canvas> 中所知的相同）的方式相同。如果您知道如何在 <canvas> 中绘制，则可以绘制 Paint 工作流！geometry 用于告知我们可以使用的画布的宽度和高度。properties 我将在本文稍后部分进行介绍。

注意：绘制 Worklet 的上下文与 <canvas> 上下文并非完全相同。目前，我们还缺少文本渲染方法，出于安全考虑，您无法从画布中读回像素。

作为入门示例，我们来编写一个棋盘格绘制 Worklet，并将其用作 <textarea> 的背景图片。（我使用 textarea，因为它默认可调整大小。）

<!-- index.html -->
<!doctype html>
<style>
  textarea {
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

// checkerboard.js
class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ['red', 'green', 'blue'];
    const size = 32;
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x * size, y * size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);

如果您过去使用过 <canvas>，应该会觉得这段代码很熟悉。点击此处查看实时演示。

注意：与几乎所有新 API 一样，CSS Paint API 只能通过 HTTPS（或 localhost）使用。

采用棋盘格模式作为背景图片的文本区域 — 棋盘格图案作为背景图片的 Textarea。

与使用常规背景图片相比，这里的不同之处在于，每当用户调整文本区域大小时，系统都会按需重新绘制图案。这意味着，背景图片始终是完全符合需要的大小，包括针对高密度显示屏的补偿。

这很酷，但同时也是静止的。每次想要相同的图案但不同大小的方块时，我们是否都需要编写新的 Worklet？答案是否定的！

对您的 Worklet 进行参数化

幸运的是，Paint Worklet 可以访问其他 CSS 属性，这时额外的参数 properties 就派上用场了。通过为类提供静态 inputProperties 属性，您可以订阅任何 CSS 属性（包括自定义属性）的更改。系统会通过 properties 参数向您提供这些值。

<!-- index.html -->
<!doctype html>
<style>
  textarea {
    /* The paint worklet subscribes to changes of these custom properties. */
    --checkerboard-spacing: 10;
    --checkerboard-size: 32;
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

// checkerboard.js
class CheckerboardPainter {
  // inputProperties returns a list of CSS properties that this paint function gets access to
  static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }

  paint(ctx, geom, properties) {
    // Paint worklet uses CSS Typed OM to model the input values.
    // As of now, they are mostly wrappers around strings,
    // but will be augmented to hold more accessible data over time.
    const size = parseInt(properties.get('--checkerboard-size').toString());
    const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
    const colors = ['red', 'green', 'blue'];
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        ctx.fillStyle = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
        ctx.fill();
      }
    }
  }
}

registerPaint('checkerboard', CheckerboardPainter);

现在，我们可以对所有不同类型的棋盘使用相同的代码。更棒的是，我们现在可以进入开发者工具并摆弄值，直到找到正确外观。

注意：将颜色参数化也会很不错，不是吗？该规范允许 paint() 函数接受一系列参数。此功能尚未在 Chrome 中实现，因为它严重依赖于 Houdini 的 Properties and Values API，而该 API 仍需要进行一些工作才能发布。

不支持绘制 Worklet 的浏览器

在撰写本文时，只有 Chrome 实现了绘制 Worklet。虽然所有其他浏览器供应商都获得了积极的信号，但进展不大。如需了解最新动态，请定期查看 Houdini 是否已准备就绪？与此同时，请务必使用渐进式增强功能来确保代码能够正常运行，即使不支持绘制工作流也是如此。为确保一切按预期运行，您必须在两个位置调整代码：CSS 和 JS。

如需在 JS 中检测对绘制 Worklet 的支持，可以通过检查 CSS 对象来实现：js if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('mystuff.js'); } 对于 CSS 端，您有两个选项。您可以使用 @supports：

@supports (background: paint(id)) {
  /* ... */
}

一种更为紧凑的技巧是，如果其中包含未知函数，CSS 就会使整个属性声明失效，并随后忽略整个属性声明。如果您两次指定一个属性（先不使用绘制 worklet，然后使用绘制 worklet），则会获得渐进增强效果：

textarea {
  background-image: linear-gradient(0, red, blue);
  background-image: paint(myGradient, red, blue);
}

在支持绘制 Worklet 的浏览器中，background-image 的第二个声明会覆盖第一个声明。在不支持绘制 worklet 的浏览器中，第二个声明无效且将被舍弃，第一个声明仍有效。

CSS 绘制 Polyfill

对于许多用途，您还可以使用 CSS 绘制 Polyfill，为现代浏览器添加 CSS 自定义绘制和绘制 Worklet 支持。

使用场景

绘制 worklet 有许多用例，其中一些用例比其他用例更明显。其中一个比较明显的改进是使用绘制 worklet 来减小 DOM 的大小。通常，添加元素只是为了使用 CSS 创建装饰。例如，在 Material Design Lite 中，带有涟漪效果的按钮包含 2 个额外的 <span> 元素，用于实现涟漪本身。如果您有大量按钮，这些按钮会累计产生大量 DOM 元素，并可能导致移动设备上的性能下降。如果您改为使用绘制 Worklet 来实现涟漪效果，则最终将得到 0 个额外的元素，而只有一个绘制 Worklet。此外，您还可以获得更易于自定义和参数化的代码。

使用绘制 Worklet 的另一个优势是，在大多数情况下，使用绘制 Worklet 的解决方案在字节数方面较小。当然，这也是一种折衷做法：只要画布的大小或任何参数发生变化，绘制代码就会运行。因此，如果您的代码很复杂且运行时间很长，可能会导致卡顿。Chrome 正在努力将绘制 worklet 移出主线程，这样即使长时间运行的绘制 worklet 也不会影响主线程的响应能力。

对我来说，最令人兴奋的前景是，绘制 worklet 允许高效地对浏览器尚不支持的 CSS 功能进行 polyfill。例如，对圆锥梯度执行 polyfill 操作，直到它们以原生方式到达 Chrome 为止。再举一个例子：在一次 CSS 会议上，决定现在可以有多种边框颜色。会议期间，我的同事 Ian Kilpatrick 使用绘制 Worklet 为这种新的 CSS 行为编写了 polyfill。

跳出思维定式

大多数人在了解绘制 Worklet 时，都会开始考虑背景图片和边框图片。对于绘制 Worklet，有一个不太直观的用例是 mask-image，它可以使 DOM 元素具有任意形状。例如，钻石：

mask-image 会采用与元素大小相同的图片。遮罩图片透明的区域，元素也是透明的。遮罩图片不透明的区域，元素不透明。

现已在 Chrome 中推出

Paint Worklet 已在 Chrome Canary 版中推出一段时间。在 Chrome 65 中，该功能默认处于启用状态。欢迎试用绘图 Worklet 带来的新可能性，并向我们展示您构建的内容！如需获得更多灵感，请查看 Vincent De Oliveira 的集合。