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 的定义 |
工作草案 | 初始定义。 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 65 | 未知 | 未知 | 不支持 | 未知 | 未知 |
devicePixelRatio | 65 | 未知 | 未知 | 不支持 | 未知 | 未知 |
registerPaint | 65 | 未知 | 未知 | 不支持 | 未知 | 未知 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 65 | 65 | 未知 | 未知 | 未知 | 未知 | 未知 |
devicePixelRatio | 65 | 65 | 未知 | 未知 | 未知 | 未知 | 未知 |
registerPaint | 65 | 65 | 未知 | 未知 | 未知 | 未知 | 未知 |