一水 發自 凹非寺
量子位 | 公眾號 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
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.