PaintWorklet

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

PaintWorklet interface of the CSS Painting API programmatically generates an image where a CSS property expects a file. Access this interface through CSS.paintWorklet .

特性

PaintWorklet.devicePixelRatio
Returns the current device's ratio of physical pixels to logical pixels.

事件处理程序

None.

方法

This interface inherits methods from Worklet .

PaintWorklet.registerPaint()
Registers a class programmatically generate an image where a CSS property expects a file.
CSS.PaintWorklet.addModule()
addModule() method, inhertied from the Worklet interface loads the module in the given JavaScript file and adds it to the current PaintWorklet.

范例

The following three examples go together to show creating, loading, and using a PaintWorklet .

Create a PaintWorklet

The following shows an example worklet module. This should be in a separate js file. Note that registerPaint() is called without a reference to PaintWorklet .

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

Load a PaintWorklet

The following example demonstrates loading the above worklet from its js file and does so by feature detection.

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

Use a PaintWorklet

This example shows how to use a PaintWorklet in a stylesheet, including the simplest way to provide a fallback if PaintWorklet isn't supported.

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

You can also use the @supports at-rule.

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

规范

规范 状态 Comment
CSS Painting API Level 1
The definition of 'PaintWorkletGlobalScope' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
PaintWorkletGlobalScope Chrome 65 Edge ≤79 Firefox ? IE No Opera ? Safari ? WebView Android 65 Chrome Android 65 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 9.0
devicePixelRatio Chrome 65 Edge ≤79 Firefox ? IE No Opera ? Safari ? WebView Android 65 Chrome Android 65 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 9.0
registerPaint Chrome 65 Edge ≤79 Firefox ? IE No Opera ? Safari ? WebView Android 65 Chrome Android 65 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 9.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知

另请参阅