一水 發(fā)自 凹非寺
量子位 | 公眾號(hào) QbitAI

word天，前端現(xiàn)在都高級(jí)成這樣了嗎？！

小手輕輕一指，被選中的區(qū)域就立馬出現(xiàn)了碎片效果，炫酷感一整個(gè)撲面而來。

渲染真人還不算，設(shè)計(jì)游戲更是一把好手，同款射擊破碎效果這就上桌。

還有高手，直接將網(wǎng)頁設(shè)計(jì)成魚眼效果，還是想怎么調(diào)就怎么調(diào)那種。

不止這些，（前推特）上此刻正有一大堆酷炫的前端作品刷屏，直讓人眼花繚亂。

而它們，統(tǒng)統(tǒng)來自一種正悄然走紅的實(shí)驗(yàn)性玩法——HTML-in-Canvas。

用最直白的話解釋就是，這是一種把網(wǎng)頁當(dāng)成游戲畫面來渲染的UI設(shè)計(jì)新嘗試。

一眾嘗鮮的網(wǎng)友紛紛表示，HTML-in-Canvas很可能就是下一代網(wǎng)頁交互的雛形。

我很少說某件事是“改變游戲規(guī)則的”，但HTML-in-Canvas可能就是。這是一個(gè)“讓Flash回歸”的時(shí)刻。

我一生都在等待這個(gè)Web API。

想象一下，將你能想到的任何視覺效果應(yīng)用于任何HTML。

那么問題來了，HTML-in-Canvas到底是啥？

把HTML“塞進(jìn)”Canvas里

HTML-in-Canvas，從名字上就能看出來了，這是一種把HTML“塞進(jìn)”Canvas里進(jìn)行渲染的方法。

之所以這樣做，歸根到底就倆字：方便。

傳統(tǒng)網(wǎng)頁開發(fā)近乎于“裝配流水線”，HTML負(fù)責(zé)定結(jié)構(gòu)、CSS負(fù)責(zé)定樣式，最終交給瀏覽器來排版和渲染。

就是說，雖然“材料”是你給的，但網(wǎng)頁最終長啥樣，基本都是瀏覽器說了算。

而Canvas的邏輯完全不同——

沒有DOM、沒有布局系統(tǒng)、沒有現(xiàn)成組件，開局只有一塊空白畫布，所以你可以隨心所欲控制畫面里的一切。

不過也正是因?yàn)檫^于隨意，啥都要自己弄，所以Canvas一般被用來做游戲、數(shù)據(jù)可視化這類本來就需要自己從零開始的東西。

那么有沒有一種東西，能結(jié)合HTML的“省心省力”和Canvas的“自由”呢？

HTML-in-Canvas，正是這樣的東西。

它直接把HTML“拍成一張圖”，再丟進(jìn)Canvas里玩。

如此一來，也帶來了三個(gè)最明顯的變化：

一是過去很多難以實(shí)現(xiàn)的特效，現(xiàn)在都變得更加easy，因?yàn)槟悴僮鞯囊呀?jīng)不是DOM，而是像素了。

傳統(tǒng)DOM有點(diǎn)像被整體打包好的東西（如一個(gè)按鈕、一張圖片、一段文字等），只能整體操作。

而像素就是組成這些東西的小碎粒，能單獨(dú)控制每一個(gè)。

所以現(xiàn)在我們可以像開發(fā)游戲一樣開發(fā)前端，比如網(wǎng)友們提到的：給UI加著色器、接入物理引擎，甚至逐幀去控制每一個(gè)像素該怎么動(dòng)。

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

以前網(wǎng)頁開發(fā)好像默認(rèn)UI必須是矩形一樣，所有東西都很方方正正。

但有了Canvas之后，前端開始出現(xiàn)魚眼、透視滾動(dòng)等非線性，甚至是奇奇怪怪的設(shè)計(jì)（doge）。

喏，有人就試了網(wǎng)頁放大鏡效果：

（實(shí)驗(yàn)性階段，大家現(xiàn)在拼的都是創(chuàng)意hhh）

以及大家很容易忽視的一點(diǎn)，網(wǎng)頁動(dòng)畫現(xiàn)在和游戲引擎用的是同一套邏輯了。

在傳統(tǒng)前端開發(fā)里，動(dòng)畫的處境其實(shí)一直很尷尬：

你是在一套已經(jīng)“定型”的靜態(tài)結(jié)構(gòu)上，硬讓它動(dòng)起來。

要么用CSS，給框架貼個(gè)“會(huì)動(dòng)”的標(biāo)簽；要么用requestAnimationFrame，自己一幀一幀去改屬性、做插值。

而HTML-in-Canvas，情況剛好反過來——整個(gè)渲染過程，本身就是一幀一幀計(jì)算出來的。

所以現(xiàn)在的網(wǎng)頁，看上去就和游戲渲染畫面差不多。

眾所周知，正常HTML本身是沒法運(yùn)行《毀滅戰(zhàn)士》（Doom）這款游戲的。

因?yàn)镈oom是用C語言寫的，需要直接操作圖形、內(nèi)存和輸入設(shè)備，而HTML只是描述網(wǎng)頁結(jié)構(gòu)的語言，本身不具備游戲運(yùn)行能力。

但現(xiàn)在，有人卻把HTML“塞進(jìn)了”Doom里。

這些網(wǎng)頁元素被實(shí)時(shí)“拍”成圖片，降成Doom能識(shí)別的256色，然后當(dāng)作墻紙貼到Doom的墻面上。

所以現(xiàn)在你能看到Doom墻上有網(wǎng)頁內(nèi)容，而且還能跟著你的動(dòng)作變化。

視頻鏈接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

以及值得一提的是，雖然HTML-in-Canvas目前只是一項(xiàng)實(shí)驗(yàn)功能，但它已經(jīng)以提案的形式進(jìn)入W3C（萬維網(wǎng)聯(lián)盟）/WICG（Web平臺(tái)孵化器社區(qū)組）體系——

這意味著，它未來有機(jī)會(huì)進(jìn)入HTML標(biāo)準(zhǔn)體系，成為瀏覽器原生支持的一部分。

所以當(dāng)公測開啟后，此時(shí)能吸引一波關(guān)注也就不奇怪了。

（補(bǔ)充一下，類似的想法其實(shí)在2016年就被提出過，不過當(dāng)時(shí)瀏覽器廠商覺得用不上所以一直擱置，直到最近被谷歌重拾并繼續(xù)推進(jìn)。）

一種比Pretext更顛覆的前端技術(shù)

至于如何玩上HTML-in-Canvas，可以看看網(wǎng)友的打樣。

這里我們以Chrome瀏覽器為例：

第一步：在地址欄輸入「chrome://flags/#canvas-draw-element」，找到并開啟HTML in Canvas實(shí)驗(yàn)功能。

第二步：在代碼的< canvas >標(biāo)簽上顯式加上layoutsubtree屬性。

第三步：然后就可以用getContext(‘2d’) 拿到畫布上下文，調(diào)用drawElementImage方法，把canvas里的子元素直接畫到畫布上。

設(shè)置完成后就可以開動(dòng)了。

有人腦洞大開搞了個(gè)“碟中諜”玩法，類似摸魚一樣，在桌面里搞了個(gè)桌面。

雖然看起來“不正經(jīng)”，但用谷歌搜Hacker News都沒問題。

視頻鏈接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

還有人把它用在更“實(shí)用”的方向——做了一個(gè)防垃圾郵件的登錄界面。

輸入框不再是普通表單，而是會(huì)扭曲、漂移、甚至帶點(diǎn)干擾效果的動(dòng)態(tài)界面。

對(duì)真人來說，依然可以識(shí)別和輸入（雖然不太友好）。

但對(duì)腳本和爬蟲來說，識(shí)別難度直接拉滿。

視頻鏈接：https://mp.weixin.qq.com/s/1sHFs1JKXC0Kta6fd3zGBQ

網(wǎng)友們一番體驗(yàn)下來發(fā)現(xiàn)，好家伙，這幾乎是一種比Pretext更顛覆的前端技術(shù)。

看到對(duì)pretext的反應(yīng)后，我可以直說，世界還沒有準(zhǔn)備好接受HTML-in-Canvas。

這里他提到的Pretext，是由Midjourney工程師Cheng Lou開源的一款爆火前端工具。

它繞開瀏覽器的DOM排版系統(tǒng)，用純數(shù)學(xué)計(jì)算文字該排在哪，排版速度比傳統(tǒng)方式快幾百倍。

而且還能讓文字像流水一樣隨意變形、繞開圖片、甚至做成游戲。

Pretext有多火呢？不僅作者發(fā)布的帖子獲得千萬瀏覽，而且GitHub火速攬星4萬+。

然而現(xiàn)在，如果說Pretext是把“文字排版權(quán)”從瀏覽器手里拿走，那HTML-in-Canvas則是把“整個(gè)界面渲染權(quán)”一起拿走了。

無怪乎Vercel CEO感嘆，網(wǎng)絡(luò)最輝煌的日子還在前方。

在他看來，網(wǎng)絡(luò)是AI的天然載體。

大語言模型最擅長的就是寫HTML、CSS、JS，而瀏覽器就是所有人的代碼編輯器——不用交“蘋果稅”（蘋果應(yīng)用商店上架收費(fèi)），不用等審核，打開就能用。

而且已經(jīng)能看到，一些最底層的能力正在全面爆發(fā)。

包括HTML-in-Canvas在內(nèi)，WebGPU、WebAssembly這些以前想都不敢想的東西，現(xiàn)在已經(jīng)快成標(biāo)配了。

所以以后Web的性能天花板大概率會(huì)被直接掀翻，今后網(wǎng)頁可能“會(huì)像游戲一樣驚艷、一樣天馬行空”。

當(dāng)然最重要的還是，HTML-in-Canvas讓大家意識(shí)到，生成式AI才是UI的終極形態(tài)。

未來的網(wǎng)頁，不再是設(shè)計(jì)師畫好、程序員寫死的東西，而是AI在你點(diǎn)開鏈接的那一瞬間，實(shí)時(shí)為你生成的——

每個(gè)人看到的樣子都不一樣，每一幀都剛剛好。

所以從這個(gè)角度而言，AI+UI能怎么玩，HTML-in-Canvas可能只是起點(diǎn)。

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