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

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

PaintWorkletCSS 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 的定义
工作草案 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持65 未知 未知 不支持 未知 未知
devicePixelRatio65 未知 未知 不支持 未知 未知
registerPaint65 未知 未知 不支持 未知 未知

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持6565 未知 未知 未知 未知 未知
devicePixelRatio6565 未知 未知 未知 未知 未知
registerPaint6565 未知 未知 未知 未知 未知

相关链接