Canvas 核心技術

最近項目需求中要寫較多H5小遊戲，遊戲自己體量不是很複雜，主要是承載較多業務邏輯，因此決定用canvas來完成遊戲部分。以前只是知道H5中有canvas這個東西，也知道它大概是畫圖的，但具體怎麼用，仍是一無所知的。在MDN在看了一些相關資料，一口氣也看了HTML 5 Canvas 核心技術和HTML5 2D 遊戲編程核心技術，對canvas H5 遊戲編程有了大體的瞭解，發現canvas遊戲編程其實挺有趣的。目前也在學習webgl相關知識，打算把前端可視化這一塊也深刻學習。如今先記錄一些本身認爲canvas比較重要的知識，回顧和再學習。後續在記錄webgl相關知識。

主要知識點

本系列主要深刻學習canvas 2d編程中相關比較重要和基礎的知識，算是對HTML 5 Canvas 核心技術這本書的讀後感，大體知識點以下：

1. 基礎知識，學習如何繪製線段，圖形，圖片，文本等。
2. 動畫知識，學習如何用canvas實現簡單的動畫以及相關影響因素
3. 碰撞檢測，學習如何檢測兩個物體在運動過程當中是否發生碰撞
4. 2D遊戲開發，學習用canvas開發2D遊戲
5. 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核心技術-向量，三角函數