最近前端设计领域出现了许多令人惊艳的新技术。
当今的前端设计师们已经能够轻松实现以前难以想象的效果了，让人不禁感叹时代的变化之快。
例如，轻轻一点鼠标就能让选定区域呈现出碎片化效果，视觉体验极为震撼。
此外，他们还能在游戏中加入真人渲染和射击破碎特效等功能。
更有设计师将网页设计为鱼眼视角，并能够自由调整各种参数。
目前在各大社交媒体平台上，这类炫酷的前端作品层出不穷，令人目不暇接。
这些创新的设计都得益于一种名为HTML-in-Canvas的新技术，它正在悄然兴起并受到广泛关注。
简单来说，HTML-in-Canvas是一种将网页视为游戏画面进行渲染的全新UI设计方法。
很多尝鲜的网友表示，这种新技术很可能引领下一代网页交互的发展方向。
尽管我对技术革新的态度一向谨慎，但HTML-in-Canvas确实可能带来革命性的变化。
这种技术让人期待已久。
它允许开发者将任何视觉效果应用到任意的HTML元素上。
那么，什么是HTML-in-Canvas呢？
将HTML嵌入Canvas中
从名称就可以看出，这是一种将HTML内容置于Canvas环境中进行渲染的技术。
这种做法的核心优势在于便利性。
在传统的网页开发中，工作流程通常是这样的：HTML负责定义结构，CSS处理样式，最终由浏览器完成布局和渲染。
也就是说，尽管开发者提供了素材，但最终呈现效果很大程度上取决于浏览器的决定。
相比之下，Canvas的工作方式完全不同——
它没有DOM树、布局系统或现成组件，只有一张空白画布，可以完全自由地控制画面中的每一个元素。
然而正因为过于灵活，所有事情都需要开发者自己完成，因此它通常被用于游戏开发和数据可视化等领域。
那么有没有一种技术能够结合HTML的便利性和Canvas的自由度呢？
HTML-in-Canvas就是这样的一个解决方案。
它直接将HTML转换为图像，并将其嵌入到Canvas中进行进一步处理。
这种方法带来了以下三个主要变化：
首先，许多过去难以实现的特效现在变得更加容易实现了，因为你操作的是像素而非DOM元素。
传统DOM类似一个整体打包好的组件（如按钮、图片等），只能整块处理。
而像素是构成这些元素的基本单位，可以单独控制每一个。
这意味着我们可以像开发游戏一样设计前端界面，例如添加着色器和物理引擎等功能。
其次，UI布局的多样性得到了显著提升。
以往网页设计通常局限于矩形框架内，但现在利用Canvas技术可以实现鱼眼效果、透视滚动等非传统形式的设计。
最后，网页动画与游戏引擎采用了相同的逻辑体系。
在传统的前端开发中，动画的处理一直是一个难题：
你必须在一个静态结构上强行添加动态元素。
要么使用CSS动画标签；要么用requestAnimationFrame方法手动调整每一帧的状态。
然而HTML-in-Canvas技术颠覆了这种局面——整个渲染过程本身就是逐帧计算的结果，使得网页看起来就像游戏画面一样流畅。
举例来说，有人尝试将HTML嵌入经典游戏《毁灭战士》中。
这些网页元素被实时转化为图像，并以256色的形式呈现于游戏中墙面之上。
如此一来，在游戏中就能看到动态变化的网页内容了。
目前这项技术虽然还处于实验阶段，但已经作为提案提交给W3C和WICG组织进行审议——
这意味着它有望在未来成为HTML标准的一部分，并被浏览器原生支持。
因此当公测开始后，引起大量关注也就不足为奇了。
值得一提的是，类似的设想早在2016年就曾提出过，但由于当时缺乏实际应用需求而被搁置。直到最近谷歌重新启动这一项目并继续推进。
作为一种比Pretext更为激进的前端技术
对于如何尝试HTML-in-Canvas，大家可以参考网友们的示例操作：
在Chrome浏览器中输入「chrome://flags/#canvas-draw-element」以开启实验功能，并在代码中的< canvas >标签添加layoutsubtree属性。
然后通过调用drawElementImage方法将子元素绘制到画布上即可开始使用。
一些网友脑洞大开，制作了类似“碟中谍”的玩法。
这些设计虽然看似不正经，但仍能正常搜索信息。
另外还有人尝试将其应用于防垃圾邮件的登录界面，通过动态变形和干扰效果增加识别难度。
尽管对于真人用户来说可能不太友好，但对于脚本和爬虫却极为困难。
经过一番体验后大家发现，HTML-in-Canvas几乎是一种比Pretext更激进的技术革新。
可以说，世界还没有准备好接受这项技术带来的冲击。
Pretext是由Midjourney工程师Cheng Lou开源的一款热门前端工具，它绕过了浏览器的DOM布局系统，采用纯数学算法计算文字排版位置，速度远超传统方法。
而且它还能够实现文字像流水般随意变形、绕过图片等功能。
Pretext有多受欢迎呢？作者发布的帖子获得了千万次浏览量，并在GitHub上快速积累了4万多颗星标。
然而，如果说Pretext只是将“文本排版权”从浏览器中拿走的话，那么HTML-in-Canvas则是进一步剥夺了整个界面的渲染控制权。
因此Vercel CEO认为网络最辉煌的时代即将到来。
在他看来，网络是AI技术的理想载体。
大语言模型擅长编写HTML、CSS和JS代码，而浏览器则相当于每个人的实时编辑器——无需支付苹果税或等待审核即可使用。
同时我们也看到WebGPU、WebAssembly等底层技术正在迅速普及和发展中。
未来网页的性能上限很可能被打破，网页设计将变得像游戏一样充满创意和可能性。
最为重要的是，HTML-in-Canvas让大家意识到生成式AI将是UI发展的终极形态。
将来的网页不再是设计师绘制和程序员编写的结果，而是会在用户访问时由AI实时生成的——
每个人看到的内容都是独一无二且即时更新的。
从这个角度来看，HTML-in-Canvas可能只是开启了AI与UI结合的新篇章。
看到对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