# David Haz 為 Canvas UI 新增 8 種元件，HTML-in-Canvas 與 WebGL 效果再往前推

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：David Haz (@davidhdev) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-07-31

> 原始來源：https://x.com/davidhdev/status/2082814014795526269

## 證據與延伸閱讀

- [David Haz 推出 8 種 Canvas UI 組件](https://x.com/davidhdev/status/2082814014795526269)

## 中文摘要

David Haz 為 Canvas UI 新增 8 種元件，HTML-in-Canvas 與 WebGL 效果再往前推。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/cf8007a9218747a7.png)
> Canvas UI 的標題與宣傳橫幅，帶有「Canvas UI」字樣及「Tasteful html-in-canvas & WebGL components.」副標題與藍白相間的視覺背景。

**全新 UI 組件**
- Decrypt Reveal：呈現帶有雜訊與 ASCII 藝術背景的介面，並顯示加密檔案資訊與「Grant clearance」按鈕。
- ASCII Object：展示由 ASCII 字元構成的立體圖形視覺效果。
- Flame Wrap：呈現卡片外圍帶有動態火焰燃燒邊框與「Trending now」標題的設計。
- Liquid Object：展示在多個面板間流動且具光澤的彩色液態視覺效果。
- Displacement：呈現畫面產生雜訊與錯位位移的動態效果。
- Force Field：以蜂巢狀網格背景疊加動態光影。
- Glyph Rain：呈現背景隨機落下數字與文字字元的視覺效果。
- Canvas：把即時 HTML 畫到織紋畫布材質上（官方[元件頁](https://canvasui.dev/components)列出的第 8 個新元件，影片未單獨標題展示）。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1785457286006-pvv0y7e4.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/dc5ace6e8dac8650.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 宣傳名為 Canvas UI 的 UI 組件庫展示短片，呈現其包含 8 種特色互動視覺效果的元件。

**應用與展示**
- 此次更新持續擴展 Canvas UI 的維度，深化 HTML-in-Canvas 與 WebGL UI 的技術表現。
- 影片中段以一頁行銷網站畫面當素材，主標、內文與圖片被套上雜訊與錯位位移的效果。
- 線上展示：[canvasui.dev](http://canvasui.dev)。

## 標籤

新產品, Web