本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上术浪，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載鲤拿。
原文地址：https://segmentfault.com/a/1190000007522378
項(xiàng)目Github：https://github.com/Array-Huang/canvas-learning
案例1： 井字游戲
案例1-1
- 簡(jiǎn)單應(yīng)用了canvas的一些基礎(chǔ)API搬瑰，如繪制基本圖形以及路徑。
案例1-2
- 練習(xí)使用
Path2D配合translate來復(fù)用路徑跃捣。
案例2：鋪磚
- 練一下批量有規(guī)律地輸出圖形，靈感來自前公司樓下的地磚夺蛇。
案例3：相框
- 主要是練習(xí)canvas圖片相關(guān)的API疚漆。
案例4：進(jìn)度條
- 練習(xí)canvas文字相關(guān)的API。
- 練習(xí)canvas動(dòng)畫刁赦。
案例4-1：長(zhǎng)條進(jìn)度條
案例4-2：圓形進(jìn)度條
案例5：做自由落體運(yùn)動(dòng)的球
案例5-1
- 練習(xí)自由落體運(yùn)動(dòng)的動(dòng)畫娶聘。
- 練習(xí)在動(dòng)畫里同時(shí)處理多個(gè)圖形。
案例5-2：用戶交互加強(qiáng)版
- 用戶可以通過拖動(dòng)球來改變其位置截型，若新位置不在畫布底部趴荸，則開始做自由落體運(yùn)動(dòng)。
- 練習(xí)canvas用戶交互宦焦。
案例6：“過年就是這個(gè)味兒”活動(dòng)頁(yè)
- 此案例來自于我過往的一個(gè)項(xiàng)目，當(dāng)時(shí)是用css3來做的顿涣，現(xiàn)在改成用canvas來實(shí)現(xiàn)波闹。
- 練習(xí)觸控手勢(shì)：pressmove / pinch / rotate。
- 練習(xí)canvas的變形相關(guān)API：translate / scale / rotate涛碑。
本文首發(fā)于Array_Huang的技術(shù)博客——
實(shí)用至上精堕，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載蒲障。
原文地址：https://segmentfault.com/a/1190000007522378
