PaintWorkletGlobalScope
PaintWorkletGlobalScope
是 CSS 绘制 API 的一个接口,表示绘制 Worklet
内部可用的全局对象。
隐私问题
为了避免泄露已访问的链接,此功能目前在基于 Chrome 的浏览器中被禁用,适用于具有 href
属性的 <a>
元素以及此类元素的子元素。有关详细信息,请参阅以下内容
- CSS 绘制 API 隐私注意事项部分
- CSS 绘制 API 规范问题 “CSS 绘制 API 泄露浏览历史记录”
实例属性
此接口继承自 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 的浏览器中加载。