无需登录 数据私有 本地保存

CSS Paint Worklet 测试器 - 编写 JS 绘制背景图案

CSS 开发工具 CSS Houdini Paint Worklet 背景
1
0
0
0
提示：您的浏览器可能不支持 CSS Paint Worklet API。请使用 Chrome 65+ 或 Edge 79+ 以获得完整体验。 查看兼容性

CSS Paint Worklet 测试器

使用 JavaScript 编写自定义 CSS 背景图案，实时预览 Houdini Paint API 效果

Houdini API 加载中
预设图案：
1
CSS 自定义属性参数 调整参数实时生效
尚未解析到自定义属性
预览尺寸： 380px
background-image: paint(--)
提示：修改代码后会自动更新预览（300ms 防抖）。Paint Worklet 运行在独立作用域中，可通过 inputProperties 接收 CSS 变量参数。图案默认以 background-image 方式平铺重复。
常见问题与知识点
什么是 CSS Paint Worklet？
CSS Paint Worklet 是 CSS Houdini 规范的一部分，允许开发者使用 JavaScript 编程方式动态生成 CSS 图像。通过 registerPaint() 注册自定义绘制逻辑，然后在 CSS 中通过 paint(name) 函数调用。它运行在独立的 Worklet 线程中，性能优异，可用于创建复杂的背景图案、边框、装饰等。
浏览器兼容性如何？
目前 Chrome 65+、Edge 79+、Opera 52+ 完整支持。Firefox 和 Safari 尚未默认启用（截至2024年）。建议在生产环境中使用 @supports (background-image: paint(id)) 进行特性检测，并提供降级方案（如普通 CSS 渐变或静态图片）。
inputProperties 有什么作用？
inputProperties 是一个静态 getter，返回一个 CSS 自定义属性名称数组。这些属性值会自动传递给 paint() 方法的 properties 参数。当这些 CSS 变量值改变时，浏览器会自动重新绘制，无需手动触发。这是 Paint Worklet 实现动态样式的核心机制。
Paint Worklet 与 Canvas 有什么区别？
Paint Worklet 专为 CSS 图像生成设计，运行在独立线程中，不阻塞主线程。与 Canvas 相比：① Paint Worklet 通过 CSS 属性自动响应变化；② 无需手动管理 DOM 元素；③ 不能直接访问 DOM 或网络；④ 渲染上下文为 PaintRenderingContext2D，API 是 Canvas 2D 的子集。
如何在实际项目中使用 Paint Worklet？
① 创建独立的 .js 文件编写 Worklet 代码；② 通过 CSS.paintWorklet.addModule('path/to/worklet.js') 加载；③ 在 CSS 中使用 background-image: paint(worklet-name)；④ 通过 CSS 自定义属性传递参数；⑤ 使用 @supports 提供降级方案。本工具中的代码可直接保存为 .js 文件使用。
调试 Paint Worklet 有哪些技巧？
调试技巧：① 在 Chrome DevTools 中开启 Paint Worklet 断点（Sources → Worklet 面板）；② 使用简单的颜色填充测试 Worklet 是否加载成功；③ 检查 geom.width 和 geom.height 确认元素尺寸；④ 确保 inputProperties 中的属性名与 CSS 中定义的完全一致（包括双横线前缀）。
🔧 相关工具