RT meng shao: [前端开源] Canvas UI:把真实、可交互的 DOM 交给 WebGL shader 处理的创意组件库——建立在 Chrome 实验性 HTML-in-Canvas 上,支持 React / Vu...
多源视角
RT meng shao<br>[前端开源] Canvas UI:把真实、可交互的 DOM 交给 WebGL shader 处理的创意组件库——建立在 Chrome 实验性 HTML-in-Canvas 上,支持 React / Vue / Svelte / 原生。<br>https://github.com/DavidHDev/canvas-ui<br><…
查看这条来源[前端开源] Canvas UI:把真实、可交互的 DOM 交给 WebGL shader 处理的创意组件库——建立在 Chrome 实验性 HTML-in-Canvas 上,支持 React / Vue / Svelte / 原生。<br>https://github.com/DavidHDev/canvas-ui<br><br>Canvas UI 要解决…
查看这条来源AI 摘要
Canvas UI 发布了基于 Chrome 实验性 HTML-in-Canvas 的交互式 DOM+WebGL 组件库,支持多框架并面向 AI 代理分发,为前端开发带来新可能。
推荐理由常规快讯,保留列表
原文
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(跨浏览器更稳)。
讨论
暂无评论。