CSS 绘制 API：Worklet

CSS 绘制接口是 CSS Houdini 的一项功能，可以让您编写 JavaScript 工作单元函数，以编程方式生成背景、边框和遮罩，从而有效扩展 CSS background-image 的渲染能力。

绘制工作单元是一个在独立工作单元作用域中运行的 JavaScript 文件（不在主线程中运行）。它会注册一个自定义 CSS 绘制器，可作为 CSS 值使用。

工作单元类会实现 paint() 方法：

从主 JavaScript 中加载工作单元：

在任何接受图像的属性中引用已注册的绘制器名称：

绘制器可以通过将 CSS 自定义属性声明为输入属性来读取它们：

ctx 参数是 PaintRenderingContext2D，即 Canvas 2D 上下文的受限版本。您可以使用熟悉的方法：fillRect、arc、bezierCurveTo 等。

CSS 绘制 API 支持：

• 不借助 SVG 创建复杂的几何背景
• 基于可变数据的背景（进度条、活动图表）
• 由自定义属性驱动的按钮涟漪效果
• 复杂的边框效果（虚线、网纹）
• 波浪分隔线和自然形状

绘制工作线程在主线程之外（独立的工作线程上下文中）运行，并且仅在其 CSS 自定义属性发生变化时重绘。与在主线程上运行的基于画布的绘制相比，这种方式效率更高。

Chrome 65+ 和 Edge 79+ 支持 CSS 绘制 API。截至 2024 年，Firefox 和 Safari 尚不支持。请将其用作渐进增强。

请始终提供后备方案，并使用 @supports 仅在支持时应用绘制工作线程：

CSS 绘制工作线程类要实现哪个方法才能执行绘制？

CSS 绘制 API 允许 JavaScript 工作线程以编程方式生成 CSS 图像。请编写一个包含 paint() 方法的类，使用 registerPaint() 注册它，使用 CSS.paintWorklet.addModule() 加载它，然后将其用作 background: paint(name)。绘制器可以读取 CSS 自定义属性，从而创建由数据驱动的视觉效果。请使用 @supports 提供后备方案。