鐵人檔案
在這個系列中，我會帶大家從 Canvas 出發，一路探索瀏覽器中各式各樣的 Web API。
Canvas 只是起點，接下來還有 Drag and Drop、MediaDevices、Clipboard、Storage、WebSocket …… 這些 API 不僅讓前端開發更強大，也讓網頁逐漸具備桌面應用的體驗。
希望透過這趟旅程，你能更清楚理解它們的用途、限制與背後的安全設計，一起體會—— 「瀏覽器，其實比你想像中更強大」 🚀
大家好，我是 Alice Yen（丸子），一名前端工程師。 我希望自己成為能清晰表達、在技術場合侃侃而談的工程師。參加鐵人賽正是一個磨練的機會，透過連續書寫的節...
Canvas API 是 HTML5 Web API 中的重要功能，為開發者提供了強大的 2D 繪圖工具，能用於動畫、互動遊戲、數據可視化（像是前端熟悉的 EC...
昨天介紹了 Canvas 的誕生與崛起，瞭解了 Canvas 的重要性後，終於要開始實作了！ 正文開始前先簡介，Canvas API 是 HTML5 Web A...
😀 進入 Canvas 進階！本篇不再只是「畫出東西」，而是學會操作畫布狀態與圖形之間的關係。你將會：用座標變換把圖像轉場、用混色疊出設計感、用像素級處理做特效...
🧐 當你想在網頁上做動畫、畫圖表、或遊戲時，第一個問題常是：要用 DOM + CSS？還是直接上 Canvas？ DOM＋CSS 在 UI 介面與靜態排版上有絕...
🧐 上一篇我們談到 為什麼在某些情境下必須用 Canvas（像是大量即時繪製、逐像素操作、高自由度變形等）。但光是換成 Canvas 還不夠，如果使用方式不對，...
Day 2–6 我們一路用原生 Canvas 打底。老實說，要畫一個「會動、能拖、還要可重新編輯」的小工具，用原生真的很硬：🥵 你要自己存一份「場景資料」：有...
最後一篇 Canvas 系列的文章 🎉 來聊聊瀏覽器針對 Canvas 的安全設計。 在實作 Canvas 時，常會載入外部圖片當素材（圖庫、S3、CDN）。顯...
結束了精彩的 Canvas API 系列，接下來要帶大家探索更多有趣又實用的 Web API！🎉 首先登場的是 HTML5 的 Drag and Drop AP...
前幾天好累，今天來點輕鬆又有趣的！😇 今天要介紹的是瀏覽器裡的 HTML5 MediaDevices API，透過它我們可以直接存取 麥克風 與 攝影機，這也是...
