canvas-learning：分享一些本人學習canvas時用來練習的案例

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-xalmcjac-mr.html

項目Github：https://github.com/Array-Huang/canvas-learning

案例1： 井字遊戲

案例1-1

• 簡單應用了canvas的一些基礎API，如繪製基本圖形以及路徑。

案例1-2

• 練習使用Path2D配合translate來複用路徑。

案例2：鋪磚

• 練一下批量有規律地輸出圖形，靈感來自前公司樓下的地磚。

案例3：相框

• 主要是練習canvas圖片相關的API。

案例4：進度條

• 練習canvas文字相關的API。
• 練習canvas動畫。

案例4-1：長條進度條

案例4-2：圓形進度條

案例5：作自由落體運動的球

案例5-1

• 練習自由落體運動的動畫。
• 練習在動畫裏同時處理多個圖形。

案例5-2：用戶交互增強版

• 用戶能夠經過拖動球來改變其位置，若新位置不在畫布底部，則開始作自由落體運動。
• 練習canvas用戶交互。

案例6：「過年就是這個味兒」活動頁

• 此案例來自於我過往的一個項目，當時是用css3來作的，如今改爲用canvas來實現。
• 練習觸控手勢：pressmove / pinch / rotate。
• 練習canvas的變形相關API：translate / scale / rotate。

附 思惟導圖 - canvas經常使用api

本文首發於 Array_Huang的技術博客—— 實用至上，非經做者贊成，請勿轉載。
原文地址： http://www.javashuo.com/article/p-xalmcjac-mr.html