HTML-in-Canvas引爆前端！AI时代互联网视觉效果完全不一样了

来源：市场资讯

（来源：量子位）

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

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

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

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

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

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

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

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

那么问题来了，HTML-in-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墙上有网页内容，而且还能跟着你的动作变化。

视频链接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

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

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

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

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

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

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

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

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

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

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

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

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

视频链接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

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

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

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

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

视频链接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

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

这里他提到的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

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

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

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