最近專案需求中要寫較多H5小遊戲，遊戲本身體量不是很複雜，主要是承載較多業務邏輯，所以決定用canvas來完成遊戲部分。之前只是知道H5中有canvas這個東西，也知道它大概是畫圖的，但具體怎麼用，還是一無所知的。在MDN在看了一些相關資料，一口氣也看了HTML 5 Canvas 核心技術和HTML5 2D 遊戲程式設計核心技術，對canvas H5 遊戲程式設計有了大致的瞭解，發現canvas遊戲程式設計其實挺有趣的。目前也在學習webgl相關知識，打算把前端視覺化這一塊也深入學習。現在先記錄一些自己認為canvas比較重要的知識，回顧和再學習。後續在記錄webgl相關知識。
主要知識點
本系列主要深入學習canvas 2d程式設計中相關比較重要和基礎的知識，算是對HTML 5 Canvas 核心技術這本書的讀後感，大致知識點如下：
- 基礎知識，學習如何繪製線段，圖形，圖片，文字等。
- 動畫知識，學習如何用canvas實現簡單的動畫以及相關影響因素
- 碰撞檢測，學習如何檢測兩個物體在運動過程中是否發生碰撞
- 2D遊戲開發，學習用canvas開發2D遊戲
- canvas相關小知識點
在學習過程中，最好是自己能動手實現，我就專門建了一個canvas demo的專案，裡面都是自己在學習canvas時動手寫的一些例子，感興趣的可以去看看。
專案倉庫地址：https://github.com/snayan/can...
demo預覽地址：https://blog.snayan.com/canva...
我會按照上面的主要知識點，分篇幅來學習和回顧canvas 相關的核心技術。主要如下：
- canvas核心技術-如何繪製線段
- canvas核心技術-如何繪製圖形
- canvas核心技術-如何圖片和文字
- canvas核心技術-如何實現簡單動畫
- canvas核心技術-如何實現複雜動畫
- canvas核心技術-如何實現碰撞檢測
- canvas核心技術-如何實現一個簡單的2D遊戲引擎
- canvas核心技術-寬高，漸變，繪製真正1px線段
- canvas核心技術-向量，三角函式