在 javascript 中，web worker 本身不能直接实例化或调用 paintworklet。必须通过主线程的 registerpaint() api 将自定义绘制逻辑注册到 css houdini 系统中，随后在 css 样式中引用该 paintworklet。
如何正确注册 PaintWorklet
要使用 PaintWorklet，你需要创建一个继承自 PaintWorklet 的类，并在其中实现 paint(ctx, size) 方法。然后，在主线程中使用 CSS.paintWorklet.registerPaint() 将该类注册为一个全局可用的绘制单元。
class MyPaintWorklet {
static get inputProperties() {
return ['--my-color'];
}
paint(ctx, size, styleMap) {
const color = styleMap.get('--my-color').toString();
ctx.fillStyle = color;
ctx.fillRect(0, 0, size.width, size.height);
}
}
CSS.paintWorklet.registerPaint('MyPaint', MyPaintWorklet);
上述代码定义了一个简单的 PaintWorklet，它读取 CSS 变量 --my-color 并填充整个区域。注册后，你可以在 CSS 中使用 background: paint(MyPaint); 来应用它。
立即学习“Java免费学习笔记（深入）”；
如何在 CSS 中调用注册的 PaintWorklet
一旦 PaintWorklet 被注册，你就可以像使用其他背景图像一样在 CSS 中调用它。关键在于使用 paint() 函数，而不是 url() 或其他背景属性。
.element {
width: 100px;
height: 100px;
background: paint(MyPaint);
--my-color: red;
}
这段 CSS 代码将之前注册的 MyPaint 应用于类名为 element 的元素上，并将其颜色设置为红色。注意，CSS 变量 --my-color 必须在元素或其祖先元素上定义，以便 PaintWorklet 能够访问。
为什么 Web Worker 不能直接操作 PaintWorklet
Web Worker 是一个后台线程，用于执行耗时的脚本任务，但它没有访问 DOM 或浏览器的图形 API 的能力。PaintWorklet 是浏览器渲染引擎的一部分，专门用于处理 CSS 绘制指令。因此，Web Worker 无法直接与 PaintWorklet 交互。正确的做法是在主线程中注册 PaintWorklet，然后在需要时通过 CSS 引用它。
