HTML CSS Paint API绘制圆点教程

本文深入解析了如何使用CSS Paint API安全、可靠地绘制圆点背景图案，强调其必须通过独立JS文件注册Worklet并调用`CSS.paintWorklet.addModule()`异步加载的核心流程，彻底澄清了“不能直接写CSS或内联JS”“浏览器静默忽略未注册paint函数”等常见误区；同时提供了最小可用的`DotPattern` painter实现，详解自定义属性传参、Canvas绘图限制、跨浏览器兼容性（仅Chrome/Edge≥88支持）、加载时机控制、调试fallback策略及Worklet沙箱约束（无DOM、无网络、无定时器），帮助开发者避开生产环境踩坑，真正掌握这一现代CSS图形绘制能力。

CSS Paint API 画圆点必须走 Worklet 流程，不能直接写在 CSS 里，也不能用 或内联 JS 模拟——否则根本不会触发 paint() 调用，背景直接空白。

为什么 background: paint(dotPattern) 什么也不显示

常见错误是只写了 CSS，没注册 painter；或者把 registerPaint 写在普通脚本里，没走 CSS.paintWorklet.addModule() 加载流程。浏览器看到 paint(dotPattern) 但完全不认识这个名字，就静默忽略，控制台也不会报错（只有加载 module 失败时才报 Failed to execute 'addModule'）。

• 必须把 painter 类写在独立的 .js 文件中（如 dot-pattern.js），不能塞进