PaintWorklet - 用于 CSS 中以编程方式生成图像

PaintWorklet 是 CSS Painting API 的接口，用于 CSS 中以编程方式生成图像，它对应的 CSS 属性需要指向一个文件。通过 CSS.paintWorklet 访问此接口。

属性

PaintWorklet.devicePixelRatio

返回当前设备的物理像素与逻辑像素的比率。

事件处理程序

无。

方法

此接口继承了 Worklet 的方法。

PaintWorklet.registerPaint()

注册一个类，以编程方式生成图像，其中对应的 CSS 属性需要指向一个文件。

CSS.PaintWorklet.addModule()

从 Worklet 接口继承的 addModule() 方法将模块加载到给定的 JavaScript 文件中，并将其添加到当前的 PaintWorklet 中。

实例

以下三个实例一起展示了如何创建，加载和使用 PaintWorklet。

创建 PaintWorklet

下面显示了一个 Worklet 模块实例。它应该在单独的 js 文件中。请注意，下面的例子是不完整的，它在没有引用 PaintWorklet 的情况下调用了 registerPaint() 方法。

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // 像使用普通画布一样使用 `ctx`
    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();
      }
    }
  }
}

// 以特定名称注册我们的类
registerPaint('checkerboard', CheckerboardPainter);

加载 PaintWorklet

下面的实例演示了如何从其 js 文件中加载上述工作集，并通过特征检测来进行加载。

<script>
  if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('checkerboard.js');
  }
</script>

使用 PaintWorklet

该实例说明如何在样式表中使用 PaintWorklet ，包括在不支持 PaintWorklet 的情况下提供最简单的后备方法。

<style>
  textarea {
    background-image: url(checkerboard);
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>

您也可以使用 @supports 规则。

@supports (background: paint(id)) {
  background-image: paint(checkerboard);
}

规范

规范	状态	备注
CSS Painting API Level 1 PaintWorkletGlobalScope 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• CSS Painting API
• Houdini 接口
• Houdini 概述