用 Canvas 做刮刮樂：destination-out 的原理與實現 | 喂！我是 Wei

喂！我是 Wei

Front-End Engineer

Be a Problem Solver.

⌘K

導覽

所有文章緣起互動小功能

文章分類

目錄

起源核心概念：destination-out 三步驟實現步驟一：畫出覆蓋圖層步驟二：刮除像素步驟三：計算刮除比例座標轉換觸控支援基礎版 Demo 完整範例

相關文章

從 jQuery 到 TypeScript：打造轉盤抽獎元件

2026年3月9日

用 Vercel AI SDK v6 在 Next.js 加上 AI 聊天助手（免費用 Groq）

2026年3月20日

用 requestAnimationFrame 實作可中途停止的轉盤

2026年3月10日

最新文章

瀏覽器快取機制：Memory Cache、Disk Cache、Service Worker 與 PWA

前端 CI/CD 與正式環境除錯：從 Pull Request 到事故排查

即時資料怎麼選？Polling、SSE、WebSocket 比較

前端系統設計：如何拆元件、資料流與大型專案架構？

無障礙不是加 ARIA：語意化 HTML、鍵盤操作與焦點管理