WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

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 GraphicsCanvas Tutorial
  3. MDN web docs:Canvas 教學文件
  4. HTML5 Canvas Tutorials:HTML5 Canvas Tutorials
  5. TS:TS Canvas NotesTS 運用 Canvas 的範例作品

 

 

go TOP