在小说阅读器读本章

去阅读

word 天，前端现在都高级成这样了吗？！

小手轻轻一指，被选中的区域就立马出现了碎片效果，炫酷感一整个扑面而来。

渲染真人还不算，设计游戏更是一把好手，同款射击破碎效果这就上桌。

还有高手，直接将网页设计成鱼眼效果，还是想怎么调就怎么调那种。

不止这些，（前推特）上此刻正有一大堆酷炫的前端作品刷屏，直让人眼花缭乱。

而它们，统统来自一种正悄然走红的实验性玩法——HTML-in-Canvas。

用最直白的话解释就是，这是一种把网页当成游戏画面来渲染的 UI 设计新尝试。

一众尝鲜的网友纷纷表示，HTML-in-Canvas 很可能就是下一代网页交互的雏形。

我很少说某件事是 " 改变游戏规则的 "，但 HTML-in-Canvas 可能就是。这是一个 " 让 Flash 回归 " 的时刻。

我一生都在等待这个 Web API。

想象一下，将你能想到的任何视觉效果应用于任何 HTML。

那么问题来了，HTML-in-Canvas 到底是啥？

把 HTML" 塞进 "Canvas 里

HTML-in-Canvas，从名字上就能看出来了，这是一种把 HTML" 塞进 "Canvas 里进行渲染的方法。

之所以这样做，归根到底就俩字：方便。

传统网页开发近乎于 " 装配流水线 "，HTML 负责定结构、CSS 负责定样式，最终交给浏览器来排版和渲染。

就是说，虽然 " 材料 " 是你给的，但网页最终长啥样，基本都是浏览器说了算。

而 Canvas 的逻辑完全不同——

没有 DOM、没有布局系统、没有现成组件，开局只有一块空白画布，所以你可以随心所欲控制画面里的一切。

不过也正是因为过于随意，啥都要自己弄，所以 Canvas 一般被用来做游戏、数据可视化这类本来就需要自己从零开始的东西。

那么有没有一种东西，能结合 HTML 的 " 省心省力 " 和 Canvas 的 " 自由 " 呢？

HTML-in-Canvas，正是这样的东西。

它直接把 HTML" 拍成一张图 "，再丢进 Canvas 里玩。

如此一来，也带来了三个最明显的变化：

一是过去很多难以实现的特效，现在都变得更加 easy，因为你操作的已经不是 DOM，而是像素了。

传统 DOM 有点像被整体打包好的东西（如一个按钮、一张图片、一段文字等），只能整体操作。

而像素就是组成这些东西的小碎粒，能单独控制每一个。

所以现在我们可以像开发游戏一样开发前端，比如网友们提到的：给 UI 加着色器、接入物理引擎，甚至逐帧去控制每一个像素该怎么动。

二是 UI 的布局更多元化了。

以前网页开发好像默认 UI 必须是矩形一样，所有东西都很方方正正。

但有了 Canvas 之后，前端开始出现鱼眼、透视滚动等非线性，甚至是奇奇怪怪的设计（doge）。

喏，有人就试了网页放大镜效果：

（实验性阶段，大家现在拼的都是创意 hhh）

以及大家很容易忽视的一点，网页动画现在和游戏引擎用的是同一套逻辑了。

在传统前端开发里，动画的处境其实一直很尴尬：

你是在一套已经 " 定型 " 的静态结构上，硬让它动起来。

要么用 CSS，给框架贴个 " 会动 " 的标签；要么用 requestAnimationFrame，自己一帧一帧去改属性、做插值。

而 HTML-in-Canvas，情况刚好反过来——整个渲染过程，本身就是一帧一帧计算出来的。

所以现在的网页，看上去就和游戏渲染画面差不多。

众所周知，正常 HTML 本身是没法运行《毁灭战士》（Doom）这款游戏的。

因为 Doom 是用 C 语言写的，需要直接操作图形、内存和输入设备，而 HTML 只是描述网页结构的语言，本身不具备游戏运行能力。

但现在，有人却把 HTML" 塞进了 "Doom 里。

这些网页元素被实时 " 拍 " 成图片，降成 Doom 能识别的 256 色，然后当作墙纸贴到 Doom 的墙面上。

所以现在你能看到 Doom 墙上有网页内容，而且还能跟着你的动作变化。

以及值得一提的是，虽然 HTML-in-Canvas 目前只是一项实验功能，但它已经以提案的形式进入 W3C（万维网联盟）/WICG（Web 平台孵化器社区组）体系——

这意味着，它未来有机会进入 HTML 标准体系，成为浏览器原生支持的一部分。

所以当公测开启后，此时能吸引一波关注也就不奇怪了。

（补充一下，类似的想法其实在 2016 年就被提出过，不过当时浏览器厂商觉得用不上所以一直搁置，直到最近被谷歌重拾并继续推进。）

一种比 Pretext 更颠覆的前端技术

至于如何玩上 HTML-in-Canvas，可以看看网友的打样。

这里我们以Chrome 浏览器为例：

第一步：在地址栏输入「chrome://flags/-draw-element」，找到并开启 HTML in Canvas 实验功能。

第二步：在代码的 < canvas > 标签上显式加上 layoutsubtree 属性。

第三步：然后就可以用 getContext ( ‘ 2d ’ ) 拿到画布上下文，调用 drawElementImage 方法，把 canvas 里的子元素直接画到画布上。

设置完成后就可以开动了。

有人脑洞大开搞了个 " 碟中谍 " 玩法，类似摸鱼一样，在桌面里搞了个桌面。

虽然看起来 " 不正经 "，但用谷歌搜 Hacker News 都没问题。

还有人把它用在更 " 实用 " 的方向——做了一个防垃圾邮件的登录界面。

输入框不再是普通表单，而是会扭曲、漂移、甚至带点干扰效果的动态界面。

对真人来说，依然可以识别和输入（虽然不太友好）。

但对脚本和爬虫来说，识别难度直接拉满。

网友们一番体验下来发现，好家伙，这几乎是一种比 Pretext 更颠覆的前端技术。

看到对 pretext 的反应后，我可以直说，世界还没有准备好接受 HTML-in-Canvas。

这里他提到的 Pretext，是由 Midjourney 工程师 Cheng Lou 开源的一款爆火前端工具。

它绕开浏览器的 DOM 排版系统，用纯数学计算文字该排在哪，排版速度比传统方式快几百倍。

而且还能让文字像流水一样随意变形、绕开图片、甚至做成游戏。

Pretext 有多火呢？不仅作者发布的帖子获得千万浏览，而且 GitHub 火速揽星 4 万 +。

然而现在，如果说 Pretext 是把 " 文字排版权 " 从浏览器手里拿走，那 HTML-in-Canvas 则是把 " 整个界面渲染权 " 一起拿走了。

无怪乎 Vercel CEO 感叹，网络最辉煌的日子还在前方。

在他看来，网络是 AI 的天然载体。

大语言模型最擅长的就是写 HTML、CSS、JS，而浏览器就是所有人的代码编辑器——不用交 " 苹果税 "（苹果应用商店上架收费），不用等审核，打开就能用。

而且已经能看到，一些最底层的能力正在全面爆发。

包括 HTML-in-Canvas 在内，WebGPU、WebAssembly 这些以前想都不敢想的东西，现在已经快成标配了。

所以以后 Web 的性能天花板大概率会被直接掀翻，今后网页可能 " 会像游戏一样惊艳、一样天马行空 "。

当然最重要的还是，HTML-in-Canvas 让大家意识到，生成式 AI 才是 UI 的终极形态。

未来的网页，不再是设计师画好、程序员写死的东西，而是 AI 在你点开链接的那一瞬间，实时为你生成的——

每个人看到的样子都不一样，每一帧都刚刚好。

所以从这个角度而言，AI+UI 能怎么玩，HTML-in-Canvas 可能只是起点。

HTML-in-Canvas 地址：

https://github.com/WICG/html-in-canvas

参考链接：

[ 1 ] https://x.com/sawyerhood/status/2042271915658854783?s=20

[ 2 ] https://x.com/tkm_hmng8/status/2042186512545272290?s=20

[ 3 ] https://x.com/search?q=html-in-canvas

一键三连「点赞」「转发」「小心心」

欢迎在评论区留下你的想法！

—  完  —

谁会代表 2026 年的 AI？

龙虾爆火，带动一波 Agent 与衍生产品浪潮。

但真正值得长期关注的 AI 公司和产品，或许不止于此。

如果你正在做，或见证着这些变化，欢迎申报。

让更多人看见你。 https://wj.qq.com/s2/25829730/09xz/

一键关注 点亮星标

科技前沿进展每日见