📝

Canvas UI 是基于 HTML-in-Canvas 提案的首个开源 GPU 级 UI 组件库：25+ 组件（Liquid 液态 / Glass 玻璃 / Shatter 碎裂 / Blaze 火焰 / VHS 复古 CRT / Particle Reveal 粒子揭示），shadcn/ui 式源码分发，支持 React / Solid / Preact / Vue / Svelte / Vanilla JS，发布数天 GitHub 2300+ star。

Canvas UI：HTML-in-Canvas 终于落地，首个 GPU 级 UI 组件库来了

本文基于微信公众号文章整理，已补充项目元数据与上手信息。

一句话总结

Canvas UI 是第一个把 HTML-in-Canvas 提案变成可用组件的开源库：用 HTML 写界面，用 GPU 驱动表现。发布短短几天 GitHub Star 突破 2300+，被看作下一代 Web UI 的提前探索。

背景：DOM 与 Canvas 为什么不能融合？

前端多年存在一个割裂：DOM 和 Canvas 各有所长，却是两个世界。

维度	DOM	Canvas
擅长	布局、文本、交互	GPU 渲染、Shader 特效、3D 场景
定位	构建 UI	极致渲染

HTML-in-Canvas 提案想做的事，就是让真实 HTML 进入 Canvas 渲染流程——把两者的优势合体。之前这个方向停留在实验阶段，而 Canvas UI 给出了”能进实际开发”的答案。

为什么 Canvas 一直不适合写 UI？

Canvas 适合动画、游戏、数据可视化、图形渲染，但写复杂 UI 时太底层。同样是画一个按钮：

1 2	<!-- DOM：浏览器自动处理布局、字体、交互、状态 --> <button>Click me</button>

// Canvas：绘制、定位、事件、状态管理全部自己实现
ctx.fillStyle = "#333";
ctx.fillRect(20, 20, 120, 40);
ctx.fillStyle = "#fff";
ctx.fillText("Click me", 50, 45);
canvas.addEventListener("click", (e) => {
  // 手动判断点击区域
});

Canvas UI：把 GPU 能力变成组件

作者 David Haz 之前打造过热门 React 动画组件库 React Bits，这次更进一步探索下一代 Web UI。Canvas UI 把 WebGL、Shader、Canvas 渲染、动画逻辑全部封装成组件——不需要自己写 GLSL，也不需要从零搭 WebGL，直接组合即可。

25+ 个 GPU 级视觉组件

组件	效果	传统实现成本
Liquid	液态效果，流体动态容器	Three.js + GLSL Shader + WebGL 大量代码
Glass	玻璃效果，实时折射 / 扭曲 / 光影变化	同上
Shatter	碎裂效果，页面元素像玻璃一样破碎	同上
Blaze	火焰效果	同上
VHS	复古 CRT 风格：扫描线、噪点、色彩偏移	同上
Particle Reveal	粒子揭示：完整 HTML 内容像粒子一样聚合出现、消散隐藏、动态重组	同上

以前这些效果需要 Three.js + GLSL Shader + WebGL 的组合拳，现在直接组件化。

三个核心卖点

1. shadcn/ui 源码模式，为 AI Coding 时代设计

没有采用传统 npm 黑盒模式，而是类似 shadcn/ui 的源码模式：

1	npx shadcn@latest add @canvas-ui/liquid-react

组件源码直接进入你的项目，可以自由修改、二次开发、让 AI 继续优化——这对 AI Coding 时代非常重要。

2. 框架无关，底层能力属于 Web

框架	支持
React / Solid / Preact	✅
Vue / Svelte	✅
Vanilla JS	✅

不同框架只是不同入口，底层能力属于 Web 本身。

3. 优雅降级

由于依赖的 HTML-in-Canvas 仍是实验能力，完整体验需要 Chromium 开启：

1	chrome://flags/#canvas-draw-element

不支持该能力的环境下，Canvas UI 自动降级到 WebGL overlay 模式，保证可用性。

项目信息

项目	链接
GitHub	DavidHDev/canvas-ui（2300+ ⭐）
官网	canvasui.dev
作者	David Haz（React Bits 作者）

写在最后

HTML-in-Canvas 曾经只是一个大胆的浏览器方向。未来 Web UI 可能不只是 HTML + CSS + JavaScript，而是 HTML + GPU + Shader + AI——网页依然是网页，但表现力会越来越接近游戏引擎。Canvas UI 正是这条路上第一个可用的落脚点。

局限提示：目前它更像”对未来 Web UI 的提前探索”，依赖实验性浏览器能力，生产环境大规模采用仍需观望。