如何體驗 HTML in Canvas

這個功能現在可在一般 Chrome 和 Brave 裡體驗,不需要安裝實驗版瀏覽器。開啟一個 flag、重啟瀏覽器,就能試下面的 demo。

步驟 1:啟用 API

大約 30 秒就能完成。

把 chrome://flags/#canvas-draw-element 複製到 Chrome 或 Brave 的網址列。Chrome 會阻擋直接點擊內部設定頁,所以要手動複製貼上。

找到 Enable the new drawElement API for Canvas,改成 Enabled。

按 Relaunch 重新啟動瀏覽器。

步驟 2:試玩互動 demo

官方 demo 最適合拿來確認功能是否有成功開啟。

Omma 和 Whitespace 的 demo 比較適合看創作可能性,像互動網頁、3D 效果和更複雜的 UI 實驗。

社群創作參考

如果你想看其他開發者已經用這個 API 做出什麼,下面這些 X/Twitter 範例可以先看。

連結