简介：Canvas UI 是首个基于 HTML-in-Canvas API 的开源组件库，让 GPU 特效在真实、可交互的网页内容上运行。文本可选、链接可点、无障碍保留，同时享受液态玻璃、火焰、流体模拟等 35 种视觉特效。 关键字:Canvas UI, HTML-in-Canvas, WebGL, WebGPU, 前端组件库
| 说明 | 网址 |
|---|---|
| 官方文档 | https://canvasui.dev/docs |
| 组件预览 | https://canvasui.dev/playground |
| GitHub 仓库 | https://github.com/DavidHDev/canvas-ui |
什么是 HTML-in-Canvas？
HTML-in-Canvas 是 WICG 正在孵化的实验性 API，允许将 DOM 子树布局在 <canvas> 内部，通过 drawElementImage 捕获实时内容作为纹理，再用 WebGL/WebGPU 着色器进行变形处理。关键之处在于：原始 DOM 仍然是活的——文本可选中，链接可点击，无障碍树保留。
为什么 Canvas UI 与众不同
大多数视觉特效库的做法是：在内容上方盖一层 canvas，绘制“假的”动画。这意味着你看到的火焰、流体只是装饰，与页面内容毫无关系。
Canvas UI 走了一条截然不同的路。它读取你页面中真实、可交互的 DOM，将其作为纹理上传到 GPU，然后用着色器对这张“活的快照”进行实时变形。
效果是：液态效果扭曲的是真实的按钮，玻璃透镜放大的是真实的文字，火焰燃烧在真实的卡片边缘。当你点击被扭曲的按钮时，它仍然正常工作。
实验性技术的现实
要获得完整体验，用户需要在 Chrome 中启用 canvas-draw-element 标志，或使用 Origin Trial 令牌。该试用期从 Chrome 148 持续到 Chrome 150，令牌仅绑定单个域名。其他浏览器（Safari、Firefox）尚未实现此 API，但组件会优雅降级为纯 WebGL 叠加层，内容仍然可用。
35 种组件，覆盖从流体到故障艺术
Canvas UI 目前提供 35 个组件，持续增加中。每个组件都同时提供 WebGL（GLSL）和 WebGPU（WGSL 通过 vgpu）两个渲染器版本。
🌊 流体与运动
- Liquid：指针驱动的流体模拟，页面仿佛在指尖融化
- Ripple：每次点击泛起水波纹
- Cloth：织物在风中起伏
- Droplets：雨滴顺着屏幕滑落，模糊背景如雾气窗户
🔥 火焰与能量
- Blaze：火花、烟雾与热扭曲
- Flame Wrap：任意元素边缘燃烧的火焰边框
- Force Field：能量护盾，点击产生冲击波
💎 玻璃与光学
- Glass：跟随光标的水晶球透镜
- Frost：冰霜在光标下融化又冻结
- Magnify：科幻扫描镜头带 HUD 准星
📼 复古与故障
- VHS：磨损磁带波形、色度溢出与颗粒
- Glitch：数字故障失真效果
开发体验：复制源码，而非安装包
Canvas UI 采用 shadcn 兼容的注册表分发方式。你通过 CLI 命令将组件源码直接复制到项目仓库中：
npx shadcn@latest add @canvas-ui/liquid-react
源码落在 components/canvasui/ 目录下，完全属于你，可以随意修改、扩展。切换框架只需更换命令中的后缀：
npx shadcn@latest add @canvas-ui/liquid-vue
npx shadcn@latest add @canvas-ui/liquid-svelte
npx shadcn@latest add @canvas-ui/liquid-solid
六个框架全覆盖：React、Solid、Preact、Vue、Svelte、原生 Vanilla JS。
使用示例
import { Liquid } from "@/components/canvasui/Liquid";
export default function Page() {
return (
<Liquid>
<YourInteractiveContent />
</Liquid>
);
}
大多数组件是包裹式的：把你的内容放进去，特效运行在上面，交互完全保留。
扎实的工程实现
华丽的视觉背后，是对性能的克制：
- 离屏暂停：组件离开可视区域时，通过
IntersectionObserver停止动画循环 - 尊重偏好：遵循
prefers-reduced-motion设置 - 卸载清理：组件卸载时释放纹理、程序和事件监听器
- 零配置：自包含，合理的默认值，完整的 TypeScript 类型
使用建议
InfoQ 的拆解文章给出了一条重要建议：一个亮眼的特效胜过六个。避免在仪表盘、结账流程和文档网站中使用这些效果——它们更适合作为引导页、作品集或品牌体验页的点睛之笔。
总结
Canvas UI 代表了一种理念的转变：网页不应该只是在 canvas 上“画”出来的静态图像，页面本身就可以是画布的输入。通过 HTML-in-Canvas API，它让 GPU 特效与真实的、可访问的、可交互的 DOM 共存，而非替代它们。
对于前端开发者而言，这是一个值得关注的实验性项目——它展示了 WebGPU 时代 UI 表达的潜在方向，同时以 shadcn 注册表的方式保持了极低的集成门槛。你需要做的只是启用一个 Chrome 标志，然后决定：哪一个特效值得成为你页面的“那一刻”。
🔥 当期热点：Canvas UI 于 2026 年 7 月开源发布，9 月发布 35 个组件版本，目前在 GitHub 已获得超过 4,600 星标，被 shadcn 官方称为“我们见过的最令人印象深刻的注册表之一”。 📊 冷知识：Canvas UI 采用 MIT + Commons Clause 许可证——允许商业使用，但不允许转售这些组件本身。