刷前端内容的朋友，最近大概率刷到过这类视频：一个网页像游戏画面一样被渲染，放大镜扫过、玻璃碎裂、整页卷曲翻书，弹幕全是"前端要变天了"。Google 中国官方号发的《使用 HTML-in-Canvas API 打造新一代 UI》，演示的就是怎么把 HTML 元素直接绘制到画布上。哔哩哔哩这条视频的播放量已经超过 10 万。量子位那句"把网页当游戏一样渲染"的报道，也在微博上传了好几轮。微博
但评论区一直有另一派声音：“99% 的场景用不上”“白高兴一场”。两边吵得不亦乐乎。这个热闹到底值不值得追？我把提案原文、Chrome 官方状态、组件库文档和几篇实测都翻了一遍，今天把账算清楚。
先纠正一个传得最广的误解
很多营销号把 HTML-in-Canvas 说成"某个开源库爆火"，这是错的。它不是哪个库在 Canvas 里把 HTML/CSS 重新实现了一遍，而是 W3C 旗下 WICG 小组的一个正式提案，Chrome 已经在浏览器层面做实验性支持。知乎
它的原理一句话就能说清：把 DOM 的正常渲染结果，直接变成 Canvas 里的一张纹理。知乎拿到纹理之后，网页画面就是一堆可以自由操控的像素，你可以用 WebGL shader 对它做折射、碎裂、三维投影这些原本只有游戏引擎才干得了的事。关键在于，被"拍成纹理"的 DOM 语义还在——文字依然可选中、表单依然可交互、页内搜索和无障碍功能不受影响。微博这也是它和"截图转特效"最本质的区别。
这个提案的前身 canvas-formatted-text 最早能追溯到 2022 年。知乎当时它只是想给 Canvas 补个富文本排版能力，后来才升级成"让 Canvas 吃下 DOM 渲染结果"。中间搁浅了好几年，2024 年 Chrome 开始实现，今年 4 月靠一批演示视频彻底出圈。
这波爆火，到底火在哪
抛开情怀，这波热度有三个实打实的推手：
第一，演示效果确实有冲击力。把网页投影进 3D 场景、液态玻璃折射、整页粒子化，这些都是 DOM 常规渲染做不到的。有知乎答主评价"视觉效果绝对是颠覆性的"。社区里也流传一种解读：Apple 在 visionOS 上用 Metal 原生实现了 Liquid Glass，Web 平台被刺激到了，开始翻出库存提案搞军备竞赛——注意这是社区推测，不是官方说法，但 Canvas UI 组件库里 Liquid、Glass、Frost、Shatter 这套命名，确实很难不让人联想。
第二，生态跟得很快。7 月底，第一个组件库 Canvas UI 上线（canvasui.dev），把实验能力封装成 20 多个可复制组件，走 shadcn 的 registry 分发，提供 React、Vue、Svelte 和原生 TypeScript 四个版本。微博对大多数人来说，这意味着不用啃提案文档也能上手摸一下。
第三，官方持续加码。8 月上旬 Google 中国连发两条教程视频，8 月 20 日的 Google 开发者大会上又冒出一个叫 HyperFrames 的渲染优化方案，号称能大幅改善 HTML-in-Canvas 的渲染表现。哔哩哔哩不过作者自己也承认，方案还不完善、对 CSS 写法要求多。节奏很明显：这不是炒完就走的题材，官方在持续投入。
泼冷水的时间到了，而且冷水有三盆
第一盆：它不可能让你的页面更快。浏览器渲染 DOM 有十几年的优化积累——GPU 合成层、增量重绘、惰性布局。HTML-in-Canvas 的流程是：先让浏览器把 DOM 完整渲染一遍，拍成纹理，再交给 Canvas 画一遍。这个链路只会更重，不会更轻。提案文档自己也承认：滚动和动画无法独立于主线程更新。知乎所以它是"新效果"工具，不是"性能"工具，指望它优化首屏的可以直接划走。
第二盆：真实需求场景，社区盘完只有三类——在 3D 场景里嵌可交互的 2D UI、把页面导出成视频或图片、页面三维变形（翻书、卷曲）。知乎没了。你想做的粒子、火焰、雨滴这些特效，一个 WebGL overlay 叠在 DOM 上面就能实现——Canvas UI 自己在不支持的浏览器里就是这么降级的，效果几乎一样。知乎上有位答主说得很损但很准："需要 HTML-in-Canvas 的人不需要 Canvas UI，需要 Canvas UI 的人不需要 HTML-in-Canvas。"真正需要 DOM 变纹理的 Figma 级应用，UI 系统都是自研的；而拿组件库做营销页的人，大部分浏览器里根本跑不到原生那一层。
第三盆，也是最实际的：可用性。Chrome 官方把这项 API 标为"早期实验"，目前是 Chrome 148–150 的 Origin Trial，网站要单独申请试用凭证。微博知乎有位实测用户把 Canvas UI 的代码拷进自己项目，发现大半参数失效、效果天差地别，排查半天才搞明白：Canvas UI 官网是单独申请了实验开关的，“浏览器默认打开和用户主动打开，可用性完全不是一个级别”。知乎换句话说，现在绝大多数访问者根本看不到原生效果。另外两个坑：Apple 没有跟进的迹象，移动端 Web 基本与此无缘；浏览器对 WebGL 上下文数量有限制，一个页面塞多个独立小效果，可能直接加载不出来。
那到底值不值得碰？按人群分三档
只是刷到觉得酷（大多数人）：记住一个判断就够了——"DOM 变成纹理"是 Web 视觉下一个方向，但现在追没有任何实际收益，收藏本文，等它默认启用了再看。
手痒想玩：直接去 canvasui.dev，官方 demo 和组件代码都是现成的，你的浏览器不支持时它会自动降级成普通 HTML + WebGL overlay，效果也不亏。想体验真正的原生层，用 Chrome 148–150 申请 Origin Trial 或手动开启实验开关。
真想往项目里放（极少数）：只建议放在"渐进增强"这一层——首屏动效、产品展示、交互式 3D UI 可以试；登录、支付、长表单、长列表老老实实留给普通 DOM 兜底。上线前务必关掉实验开关，完整走一遍降级路径，不然你的用户看到的可能是半成品。
后续值得盯的三个信号
一是 Origin Trial 什么时候毕业：试验窗口在 Chrome 148–150，盯着 151 之后的稳定版有没有默认启用，这是"实验品变标配"的分水岭。二是 Apple 的态度：Safari 不跟进，移动端就永远是降级方案，这条线的权重甚至比 Chrome 还高。三是 HyperFrames 这类性能方案能不能成熟——性能瓶颈松动了，三类场景之外的边界才可能扩大。
一句话收尾：这波热闹对绝大多数人的价值，不是该换技术栈了，而是终于看清了一件事——Web 视觉的下一轮竞争，是 DOM 变成纹理之后，你能拿它玩出什么花。
