HTML-in-Canvas引爆前端！AI時代互聯網視覺效果完全不一樣了

一水 發自 凹非寺
量子位 | 公眾號 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