必须满足浏览器支持（Chrome/Edge≥88）和worklet模块成功注册两个前提，否则background: paint(...)会被静默忽略；常见失败原因是addModule未前置执行、file://协议限制、跨域或注册名不匹配。
能，但必须满足两个硬性前提：浏览器支持 Paint API（Chromium系为主），且 worklet 模块注册成功；否则 background: paint(...) 会被直接忽略，不报错也不渲染。
为什么 background: paint(myPainter) 没反应？
最常见原因不是代码写错，而是模块加载失败或环境不满足：
-
CSS.paintWorklet.addModule('my-painter.js')必须在任何用到paint()的 CSS 规则生效前执行，且该 JS 文件需返回 200 状态、MIME 类型为application/javascript - 本地开发时若用
file://协议，Worklet 会静默失败——必须走http://或https://（哪怕本地 server 如python3 -m http.server） - Chrome/Edge 需开启实验性功能：地址栏输入
chrome://flags/#enable-web-platform-features，确保Web Platform Features启用（2026 年稳定版已默认开启，但旧版或企业策略可能禁用） - Firefox 和 Safari 当前（2026 年中）仍不支持 Paint API，
paint()声明会被当作无效值丢弃
如何让 paint() 接收动态参数并实时重绘？
不能靠函数传参，必须走 CSS 自定义属性（--xxx） + inputProperties 声明，这是唯一被浏览器识别的响应式通道：
- 在 Worklet 类中显式声明：
static get inputProperties() { return ['--wave-amplitude', '--color-primary']; } - 在 CSS 中设置这些变量：
.bg { --wave-amplitude: 12; --color-primary: #3b82f6; background: paint(wave); } - JS 修改变量即可触发重绘：
el.style.setProperty('--wave-amplitude', '24');，无需手动调用重绘逻辑 - 注意：变量名必须完全一致，大小写敏感；未声明的变量在
properties.get()中返回空值，不会抛错
paint() 方法里能用哪些 Canvas API？
可用的是受限子集 —— PaintRenderingContext2D，它和标准 CanvasRenderingContext2D 不同：
立即学习“前端免费学习笔记（深入）”；
- 支持：
fillStyle、strokeStyle、beginPath()、arc()、lineTo()、fill()、stroke()、clearRect()、save()/restore() - 不支持：
getImageData()、toDataURL()、drawImage()（无法读取/写入像素或贴图）、clip()（裁剪路径不可用） - 无 DOM 访问权限，不能调用
document、window、fetch等任何主线程 API - 坐标系原点在左上角，
geometry参数提供{ width, height }，单位是 CSS 像素（非设备像素）
复杂图案性能卡顿？关键在 paint() 内部逻辑
Worklet 线程虽独立，但计算量过大仍会导致绘制帧率下降，尤其在高分辨率屏幕下：
- 避免每帧重复创建对象：把
new Path2D()、大数组、正则等移到类外或用缓存（Worklet 全局作用域可复用） - 减少循环次数：如画网格，用
ctx.setTransform()+ 单次绘制 + 平移，比嵌套 for 循环快 3–5 倍 - 慎用
shadowBlur、globalAlpha，它们在 Worklet 中开销显著高于主 Canvas - 调试时加
console.log会极大拖慢速度（Worklet 日志输出本身有延迟），上线前务必移除
真正难的不是写一个 painter，而是让 paint() 在 16ms 内完成 —— 它没有重排重绘的缓冲，也没有 requestIdleCallback 可用，每一帧都硬碰硬。
