澳客app HTML-in-Canvas引爆前端！AI期间互联网视觉成果完全不同样了

在演义阅读器读本章

去阅读

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 有点像被举座打包好的东西（如一个按钮、一张图片、一段翰墨等），只可举座操作。

而像素便是构成这些东西的小碎粒，能单独截止每一个。

是以现时咱们不错像开导游戏同样开导前端，雅博体育app下载中国官网入口比如网友们提到的：给 UI 加着色器、接入物理引擎，以至逐帧去截止每一个像素该若何动。

二是 UI 的布局更多元化了。

以前网页开导好像默许 UI 必须是矩形同样，通盘东西齐很方清廉洁。

但有了 Canvas 之后，前端开动出现鱼眼、透视搬动等非线性，以至是奇奇怪怪的瞎想（doge）。

喏，有东谈主就试了网页放大镜成果：

（实践性阶段，人人现时拼的齐是创意 hhh）

以及人人很容易冷漠的小数，网页动画现时和游戏引擎用的是归拢套逻辑了。

在传统前端开导里，动画的处境其实一直很窘态：

你是在一套还是"定型"的静态结构上，硬让它动起来。

要么用 CSS，给框架贴个"会动"的标签；要么用 requestAnimationFrame，我方一帧一帧去改属性、作念插值。

而 HTML-in-Canvas，情况刚好反过来——所有渲染经过，本人便是一帧一帧缱绻出来的。

是以现时的网页，看上去就和游戏渲染画面差未几。

人所共知，正常 HTML 本人是没法运行《灭亡战士》（Doom）这款游戏的。

因为 Doom 是用 C 谈话写的，需要平直操作图形、内存和输入建筑，而 HTML 仅仅描述网页结构的谈话，okoooapp本人不具备游戏运行智力。

但现时，有东谈主却把 HTML "塞进了" Doom 里。

这些网页元素被及时"拍"成图片，降成 Doom 能识别的 256 色，然后作为墙纸贴到 Doom 的墙面上。

是以现时你能看到 Doom 墙上有网页骨子，况兼还能随着你的动作变化。

以及值得一提的是，固然 HTML-in-Canvas 现时仅仅一项实践功能，但它还是以提案的体式插足 W3C（万维网定约）/WICG（Web 平台孵化器社区组）体系——

这意味着，它畴昔有契机插足 HTML 次序体系，成为浏览器原生相沿的一部分。

是以当公测开启后，此时能眩惑一波存眷也就不奇怪了。

（补充一下，访佛的思法其果真 2016 年就被提议过，不外那时浏览器厂商认为用不上是以一直抛弃，直到最近被谷歌重拾并延续推动。）

一种比 Pretext 更颠覆的前端时期

至于如何玩上 HTML-in-Canvas，不错望望网友的打样。

这里咱们以Chrome 浏览器为例：

第一步：在地址栏输入「chrome://flags/-draw-element」，找到并开启 HTML in 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

一键三连「点赞」「转发」「谨防心」

接待在批驳区留住你的思法！

—  完  —

� � 谁会代表 2026 年的 AI？

龙虾爆火，带动一波 Agent 与养殖居品波涛。

但真巧合得长久存眷的 AI 公司和居品，未必不啻于此。

如若你正在作念，或见证着这些变化，接待陈说。

让更多东谈主看见你。� � https://wj.qq.com/s2/25829730/09xz/

一键存眷 � � 点亮星标

科技前沿发挥逐日见澳客app

豪门国际官网娱乐网