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可能仅仅起先。