如何體驗 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 範例可以先看。