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

一水 发自 凹非寺量子位 | 公众号 QbitAIword天前端现在都高级成这样了吗小手轻轻一指被选中的区域就立马出现了碎片效果炫酷感一整个扑面而来。渲染真人还不算设计游戏更是一把好手同款射击破碎效果这就上桌。还有高手直接将网页设计成鱼眼效果还是想怎么调就怎么调那种。不止这些前推特上此刻正有一大堆酷炫的前端作品刷屏直让人眼花缭乱。而它们统统来自一种正悄然走红的实验性玩法——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万维网联盟/WICGWeb平台孵化器社区组体系——这意味着它未来有机会进入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在你点开链接的那一瞬间实时为你生成的——每个人看到的样子都不一样每一帧都刚刚好。所以从这个角度而言AIUI能怎么玩HTML-in-Canvas可能只是起点。HTML-in-Canvas地址https://github.com/WICG/html-in-canvas参考链接[1]https://x.com/sawyerhood/status/2042271915658854783?s20[2]https://x.com/tkm_hmng8/status/2042186512545272290?s20[3]https://x.com/search?qhtml-in-canvas一键三连「点赞」「转发」「小心心」欢迎在评论区留下你的想法—完— 谁会代表2026年的AI龙虾爆火带动一波Agent与衍生产品浪潮。但真正值得长期关注的AI公司和产品或许不止于此。如果你正在做或见证着这些变化欢迎申报。让更多人看见你。 https://wj.qq.com/s2/25829730/09xz/一键关注 点亮星标