SegmentFault 技術週刊 Vol.20 - 用 Canvas 畫個星空

SegmentFault 曾舉辦過一個社區官方的比賽「30 行 js 你能作出什麼？」，產生了好些有意思的代碼，大本鐘、瀑布粒子、模擬 loading 等各類精巧的實現。

這期週刊主題，即是受此啓發——你能用 Canvas 畫布作出什麼？有人用它來加工 HTML5 的特效，有人用它來製做城市地圖，有人用它來作頁面遊戲，還有人用它來畫日月江河。跟隨本期週刊，把屏幕當作畫板，來進入 Canvas 的世界！

<canvas id="introCanvas" width="825" height="74">
  here let's get to it!
</canvas>

學習

1. 瞭解什麼是 Canvas

• Canvas 的基本原理 // 囧囧

• HTML5 中 Canvas 的使用總結 // 巔峯小詞典

基礎結構、座標系、路徑、圖像及背景狀態、像素操做……先了解 canvas 的基本原理。而後經過第二篇，將它的各類操做一一詳細瞭解，知其然，且知其因此然。

• 繪圖：路徑、圖形（矩形/圓形/扇形）、文本、色彩、陰影

• 圖像處理方法：drawImage、getImageData / putImageData、toDataURL、save / restore

• 動畫：座標系獲取

• 像素處理：蒙版、灰度、亮度、反轉等

2. 上手第一步：畫個圓

• Canvas 入門－利用 Canvas 製做一個七巧板 // Allin

• Canvas 入門－利用 Canvas 畫國旗

先來畫圖形，三角形、正方形組成七巧板，圓形、座標系定位畫五角星，都是座標計算。再來加特效，分分鐘學會讓圖形跑起來。看看這三個，雖然都是輪子，但造的不錯啊！

• Canvas 動畫時鐘 // masqli

• Canvas 仿芝麻信用分儀表盤

加特技使用

3. 上手第二步：嘗試圖片處理

結合 JavaScript，來作一些圖片相關的基本的功能，好比

給圖片加水印：

• Canvas 實現平鋪水印 // yuqy

裁剪圖片：

• Canvas 生成和合並圖片 // 崔小拽

• HTML5 本地裁剪圖片 // JellyBool

• 用 Canvas 實現 H5 移動端圖片裁剪 // bless_l

繪製圖片技巧：

• 利用 Canvas 將白色背景的 JPEG 圖片轉成透明的 PNG 圖片 // zwhu

• Canvas 在高清屏下繪製圖片變模糊的解決方法 // KevinYue

繪製複雜的圖形：

• 利用 JavaScript 在 canvas 中畫一棵樹 // noiron

• 利用 JavaScript 生成一張隨機的城市地圖

4. 典型使用方式之動畫

關於 Canvas 動畫，這裏要重點推薦 @我仍舊在這裏 的專欄和獨立博客，做者的專欄入選了「SegmentFault 2016 年度專欄」，《每週一點 Canvas 動畫》系列寫了不少驚豔的動畫效果，推薦去訂閱。

• 每週一點 Canvas 動畫系列 - 序

• 用戶交互

• 速度與加速度（2）

• 文字粒子

• 角度反彈

• 差分函數的妙用

其餘一些值得推薦的動畫實現：

• 使用 Canvas 實現交互性圓形馬賽克效果 // 外籍傑克

• 一個有趣的 Android 加載動畫 // 林海聽濤

• Canvas 製做的下雨動畫 // tinybear

• 用 Canvas 畫一輪明月，夜空與流星 // ycwalker

5. 典型使用方式之開發個小遊戲吧！

Canvas 作網頁小遊戲也倍受推崇。一樣，先來看下該怎麼作，下面這兩篇文章精要簡明地講述 HTML5 遊戲的開發知識儲備。

• 譯丨HTML5 遊戲入門 // Fakefish

• 用 HTML5 開發一個小遊戲 // JellyBool

而後，重點推薦 @fwon 的《從零開始開發一款 H5 小遊戲》系列：五篇從基礎場景到整個遊戲的實現思路，讓你對 H5 遊戲開發有個宏觀的瞭解，知道怎麼入手。該系列文章對應遊戲代碼已開源：Sinuous game，趕快去 star 吧！

• （一）重溫 Canvas 的基礎用法

• （二）創造遊戲世界，啓動發條

• （三）攻守陣營，賦予粒子新的生命

• （四）撞擊吧粒子，炫酷技能的實現

• （五）必要的包裝，遊戲規則和場景設計

最後，再來看看一個現成的方案，結合 Vue、ES6 快速簡單地作一個遊戲應用：

• Vue+WebSocket+ES6+Canvas 製做【你畫我猜】小遊戲 // jrainlau

推薦庫

更多的 Canvas 高階使用方法，能夠再去探索，社區還有不少優秀的資料，好比 @hightopo 和 @MonoLog 的 HTML5 拓撲、3D 實現，很是優美，@musiq1989 在微信小程序中使用它來繪製圖表，等等。

在最後，推薦給你們幾個相關的庫，增長使用時的便捷。

6. 附：相關的庫

• 一個不到 1kb 的 image placeholder 的 js 庫

• 開源造輪子：一個簡潔，高效，輕量級，酷炫的不要不要的 Canvas 粒子運動插件庫

• SphinxJS——把字符串編碼成 png 圖片的超輕量級開源庫

（本期完）

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。