5-3. 認識 Canvas

看看幾個 Canvas 的範例設計

1. 簡單繪圖、單純動畫：笑臉、 輸入文字,依文字呈現動畫(但,有些字怪怪的...)。
2. 單一範例：移動滑鼠彩點追隨,點按滑鼠彈開彩點、 點按滑鼠彈開方塊、 移動滑鼠萬花筒效果。
3. 單一範例：布料模擬,可互動拖曳、 3D on 2D Canvas Demo 滑鼠移動改變角度,點按影像布料晃動。
4. 遊戲範例：桌上推球遊戲。
5. 精彩作品欣賞： 多張影像水流設計、 水波紋效果設計。
6. 更多範例前往看看：瑞典設計師的多項作品、google 搜尋 canvas example。

Canvas 教程介紹

1. 菜鳥教程：學習 HTML5 Canvas 這一篇文章就够了、 Canvas 教程參考手冊。
2. w3schools：Canvas Graphics、 Canvas Tutorial。
3. MDN web docs：Canvas 教學文件。
4. HTML5 Canvas Tutorials：HTML5 Canvas Tutorials。
5. TS：TS Canvas Notes、 TS 運用 Canvas 的範例作品。