夜雨聆风
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/#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
扫描二维码添加小助手微信
关于我们
