一水 发自 凹非寺量子位 | 公家号 QbitAI

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墙上有网页内容，并且还能随着你的作为变动。
。。

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

以及值得一提的是，固然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都没问题。
。。

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

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

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

对真人来说，依然能够鉴别和输入（固然不太敦睦）。
。。

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

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

网友们一番履历下来发现，好家伙，这险些是一种比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