圖形的基本元素是路徑。
路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。
一個路徑，甚至一個子路徑，都是閉合的。
使用路徑繪制圖形需要一些額外的步驟：
1. 創建路徑起始點
2. 調用繪制方法去繪制出路徑
3. 把路徑封閉
4. 一旦路徑生成，通過描邊或填充路徑區域來渲染圖形。
下面是需要用到的方法：
1. `beginPath()`
新建一條路徑，路徑一旦創建成功，圖形繪制命令被指向到路徑上生成路徑
2. `moveTo(x, y)`
把畫筆移動到指定的坐標`(x, y)`。相當于設置路徑的起始點坐標。
3. `closePath()`
閉合路徑之后，圖形繪制命令又重新指向到上下文中
4. `stroke()`
通過線條來繪制圖形輪廓
5. `fill()`
通過填充路徑的內容區域生成實心的圖形
- Canvas基本功能
- 繪制方法
- （一）Canvas標簽
- 定義Canvas標簽
- 理解Canvas坐標系
- 獲取Canvas環境上下文
- （二）Canvas圖形
- 繪制Canvas路徑
- 1、繪制線條
- 案例1：繪制直線
- 案例2：繪制圓形的結束線帽
- 案例3：繪制復雜圓形
- 2、繪制矩形
- 案例1：rect()與stroke()繪制矩形
- 案例2：fillRect()繪制矩形
- 3、繪制圓形
- 案例1
- 案例2
- 4、繪制貝塞爾曲線
- 案例1：貝塞爾曲線方式1
- 案例2：貝塞爾曲線方式2
- 案例3:復雜的貝塞爾曲線
- 繪制Canvas變形圖形
- 處理Canvas圖形
- （三）Canvas文本
- 繪制文字
- 設置文字格式
- 設置文字對齊方式
- （四）Canvas圖片
- 繪制drawImage圖片
- 使用getImageData()和putImageData()繪制圖片
- 使用createImageData新建像素
- 參考文章
- API官網
- 示例