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

原文閱讀：SegmentFault 技術周刊 Vol.20 - 用 Canvas 畫個星空

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

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

<canvas id="introCanvas" width_="825" height="74">n here lets get to it!n</canvas>n

學習

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 技術周刊 #

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

每周二更新，歡迎「關注」或者「訂閱」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。

推薦閱讀：