HTML-in-Canvas引爆前端！AI时代互联网视觉效果完全不一样了
HTML也能跑Doom游戏了？？
HTML-in-Canvas引爆前端！AI时代互联网视觉效果完全不一样了 – 量子位
首页
资讯
智能车
智库
活动
MEET大会
AIGC
扫码关注量子位
< img id="wx_img" src="https://www.qbitai.com/wp-content/uploads/imgs/qbitai-logo-1.png" width="400" height="400">
HTML-in-Canvas引爆前端！AI时代互联网视觉效果完全不一样了
一水
2026-04-12
22:02:36
来源：
量子位
HTML也能跑Doom游戏了？？
一水 发自 凹非寺
量子位 | 公众号 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
版权所有，未经授权不得以任何形式转载及使用，违者必究。
HTML
前端
一水
爆火GitHub！《生化危机》女主打造免费“AI记忆系统”
2026-04-09
Meta亿元天团首个大模型交卷！余家辉宋飏Jason Wei耗时九个月，一雪Llama前耻
2026-04-09
省token神器3天狂揽4.1k星！19岁小哥开发，信息无损最高省87%
2026-04-08
OpenAI又曝出内讧了！IPO前夜高层大换血
2026-04-06
扫码分享至朋友圈
相关阅读
前端没死，AI APP正在返祖
程序员要还技术债
十三
2025-12-02
AI APP
前端
前端程序员
终端开发
蚂蚁
前端小姐姐助你俘获女神心，双十一挑口红神器在此 | 开源项目
直男救星
鱼羊
2019-11-11
前端
可视化
代码变油画，精细到毛发，前端小姐姐只用HTML+CSS，让美术也惊叹
雷刚
2020-03-15
CSS
HTML
Photoshop
前端
油画
只用HTML，如何打开手机相机？前端小哥现场教学
不用javascript
梦晨
2022-10-07
前端
刚输一行代码就报5次假漏洞，npm让程序员们累觉不爱
这或许也是CVE的问题
明敏
2021-07-12
npm
前端
阿里淘系所有程序员一整年的内部技术总结，都在这里了
过去一年的核心技术进展
萧箫
2021-01-15
前端
双十一
后端
技术方案
阿里
热门文章
OpenAI新模型不是GPTX！全新预训练“土豆”曝光，Sora成弃子的原因找到了
2026-04-05
太初元碁向员工发放百亿算力token并将共建高校AI科教融合学院
2026-04-05
OpenAI又曝出内讧了！IPO前夜高层大换血
2026-04-06
让离线强化学习从「局部描摹」变「全局布局」丨ICLR’26
2026-04-06
Meta员工空转AI只为浪费token！烧的多挣的多，日均消耗2万亿
2026-04-07
关于量子位
加入我们
寻求报道
商务合作
扫码关注量子位
追踪人工智能新趋势，报道科技行业新突破
量子位 QbitAI 版权所有©北京极客伙伴科技有限公司
京ICP备17005886号-1
本文来源：量子位