前端技术迎来革新，AI时代的互联网视觉效果焕然一新。

近期前端领域出现了一系列令人惊叹的新奇作品，让人大开眼界。

不仅能够渲染真实人物图像，设计游戏也游刃有余，射击破碎效果同样精彩纷呈。

更有创意者将网页界面设计成鱼眼透视效果，随心所欲地调整画面视角。

在前推特平台上，一系列炫酷的前端作品正在刷屏，令人目不暇接。

这些创新的设计都源自一种新兴的技术——HTML-in-Canvas。

简单来说，这是一种将网页视作游戏画面来渲染的新尝试方式。

很多尝鲜者认为，这可能是下一代网页交互技术的雏形。

我很少使用“改变游戏规则”这样的说法，但HTML-in-Canvas很可能就是其中之一。它标志着Flash回归的时代已经到来。

这种创新的技术让我等待已久，它代表了一个新的Web API的到来。

想象一下，在任何网页上都可以应用各种视觉效果。

将HTML“嵌入”到Canvas中进行渲染就是HTML-in-Canvas的本质。

在传统的网页开发中，HTML负责构建页面结构，CSS处理样式设计，最终由浏览器完成布局与渲染工作。

因为过于灵活随意，Canvas通常用于游戏和数据可视化等需要从零开始构建的内容。

那么有没有一种技术既能保持HTML的便捷性又能拥有Canvas的高度灵活性呢？

HTML-in-Canvas正是这样一种技术。

它将HTML内容转换为图像，然后在Canvas中进行处理和渲染。

这种方式带来了三个显著变化：

一是过去难以实现的特效现在变得容易许多，因为操作的是像素而非DOM结构；

在传统前端开发里，动画制作往往显得有些笨拙：要么使用CSS，给框架添加“动态”标签；要么自己一帧一帧地调整属性。

而HTML-in-Canvas让整个渲染过程本身就是一个逐帧计算的过程，使得网页看起来与游戏画面无异。

众所周知，《毁灭战士》是一款用C语言编写的经典游戏，它直接操作图形、内存和输入设备，而HTML只是描述页面结构的语言。

然而现在，有人却把HTML“塞进了”Doom里，让网页元素在《毁灭战士》中实时显示并随用户动作变化。

虽然目前HTML-in-Canvas还只是一项实验功能，但已经以提案的形式进入W3C/WICG体系，并有望成为浏览器原生支持的一部分。

于是当公测开启后，引起了一波广泛关注也就不奇怪了。

近期，类似的想法在2016年就被提出过，但由于当时浏览器厂商觉得用处不大而被搁置。直到最近才由谷歌重新拾起并继续推进。

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

要体验HTML-in-Canvas可以参考网友的示范步骤：

在Chrome浏览器中，首先在地址栏输入「chrome://flags/#canvas-draw-element」开启实验功能；

接着在代码中的< canvas >标签上添加layoutsubtree属性；

最后使用getContext(‘2d’)方法获取画布上下文，并调用drawElementImage方法将子元素绘制到画布中。

完成设置后，就可以开始探索HTML-in-Canvas的无限可能了。

有人创造了“碟中谍”式的体验，在桌面里嵌套了一个小型桌面环境；

而另一位网友则开发了一款防垃圾邮件登录界面，通过动态变形的输入框来提升安全性。

这项技术几乎是一种比Pretext更颠覆性的前端革新。

从目前对pretext的反馈来看，世界还未准备好迎接HTML-in-Canvas的到来。

Pretext是由Midjourney工程师Cheng Lou开源的一款热门工具，它绕开了浏览器的传统DOM排版系统，使用纯数学计算方式来快速确定文字布局；

这种技术可以让文本像流水一样随意变形，并且能够绕过图片障碍或直接创建游戏。

而HTML-in-Canvas则更进一步，它不仅接管了文字的排布权限，还拿走了整个界面渲染的权利。

由此不难看出，网络未来的辉煌篇章才刚刚开始。

网络是AI技术的理想平台，大语言模型擅长生成网页代码，浏览器则成为了每个人的即时编辑器；

包括HTML-in-Canvas在内的多项新技术如WebGPU、WebAssembly正逐渐成为标配，预示着未来网页的性能上限将被彻底打破。

未来的网页不再是由设计师绘制和程序员编码完成的作品，而是AI在用户打开链接瞬间实时生成的独特界面；

每个人看到的内容都会有所不同，每一帧都恰到好处地呈现给用户。从这个意义上说，HTML-in-Canvas只是未来UI创新的开端。

HTML-in-Canvas项目地址：https://github.com/WICG/html-in-canvas

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

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

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

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

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

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

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

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

第一步：在地址栏输入「chrome://flags/#canvas-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