PaintWorkletGlobalScope

有限可用性

此功能不是基线功能,因为它在一些最广泛使用的浏览器中无法正常工作。

实验性: 这是一个 实验性技术
在生产环境中使用之前,请仔细查看 浏览器兼容性表格

PaintWorkletGlobalScopeCSS 绘制 API 的一个接口,表示绘制 Worklet 内部可用的全局对象。

隐私问题

为了避免泄露已访问的链接,此功能目前在基于 Chrome 的浏览器中被禁用,适用于具有 href 属性的 <a> 元素以及此类元素的子元素。有关详细信息,请参阅以下内容

实例属性

此接口继承自 WorkletGlobalScope 的属性。

PaintWorkletGlobalScope.devicePixelRatio 只读 实验性

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

实例方法

此接口继承自 WorkletGlobalScope 的方法。

PaintWorkletGlobalScope.registerPaint() 实验性

注册一个类,以编程方式生成图像,其中 CSS 属性需要一个文件。

示例

以下三个示例结合在一起,演示了创建、加载和使用绘制 Worklet 的过程。

创建绘制工作线程

以下显示了一个示例工作线程模块。这应该在一个单独的 js 文件中。请注意,registerPaint() 在没有引用绘制 Worklet 的情况下被调用。

js
class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // The global object here is a PaintWorkletGlobalScope
    // Methods and properties can be accessed directly
    // as global features or prefixed using self
    const dpr = self.devicePixelRatio;

    // 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);

加载绘制工作线程

以下示例演示了从其 js 文件加载上述工作线程,并通过功能检测来实现。

js
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("checkerboard.js");
}

使用绘制工作线程

此示例演示了如何在样式表中使用绘制 Worklet,包括在不支持 CSS.paintWorklet 时提供回退的最简单方法。

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

您还可以使用 @supports 规则。

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

规范

规范
CSS 绘制 API 级别 1
# paintworkletglobalscope

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅