# Canvas UI：首个将真实交互DOM交给WebGL shader处理的HTML-in-Canvas组件库

- 来源：meng shao (@shao__meng)
- 发布时间：2026-07-24 10:37
- AIHOT 分数：32
- AIHOT 链接：https://aihot.virxact.com/items/cmryclcdp009vroxssveik609
- 原文链接：https://x.com/shao__meng/status/2080482389718106222

## AI 摘要

Canvas UI 发布，这是首个将真实、可交互 DOM 交给 WebGL shader 处理的 HTML-in-Canvas 组件库。它基于 Chrome 实验性技术，提供 24 个组件，支持 React、Vue、Svelte 和原生 TS，运行时自动探测兼容性并降级。项目通过 shadcn registry 分发，无运行时包依赖。

## 正文

【前端开源】 Canvas UI：把真实、可交互的 DOM 交给 WebGL shader 处理的创意组件库--建立在 Chrome 实验性 HTML-in-Canvas 上，支持 React / Vue / Svelte / 原生。
https://github.com/DavidHDev/canvas-ui

Canvas UI 要解决什么？
网页长期在两条路上分叉：DOM 有语义、可选中、可无障碍；Canvas/WebGL 有像素级控制。Chrome 实验性 HTML-in-Canvas（layoutsubtree + drawElementImage + onpaint）试图把 DOM 画进 canvas，同时保留交互。Canvas UI 做的是：把这条新原语产品化成 24 个可安装组件，而不是再发一堆 demo。

David 说「技术以前不存在」--就「浏览器原生、可交互 DOM→纹理」而言是成立的；此前多为截图/html2canvas 一类 hack。但生态里已有 Chrome demo、Three.js HTMLTexture 等试验。它的差异是：完整 registry 组件库 + 四框架出口 + AI 安装路径。

架构概要
1. *Vanilla.ts 引擎 - 自包含 WebGL2 + 内嵌 GLSL（Liquid ~900 行量级）
2. 薄框架壳 - React/Vue/Svelte 只负责挂载 createX / setOptions / destroy
3. 双 canvas - source（托管 DOM）+ output（特效绘制，pointer-events： none）
4. 运行时探测 - supportsHtmlInCanvas（）；不支持则 children 退回普通 HTML，特效以叠层继续跑
5. 工程细节到位 - 离屏暂停、prefers-reduced-motion、卸载释放 GPU

分发走 shadcn registry：构建时把引擎内联进单文件，一条命令落到 components/canvasui/，无运行时包依赖。再叠加 MCP、llms.txt、Copy as Markdown--分发明确面向代理。

组件分两路：约 21 个零依赖 DOM 特效；3 个依赖 three.js 的 3D Object（跨浏览器更稳）。

### 引用推文

> David Haz：Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 compo...