在 `canvas` 中繪制,將使用以下方法
# (一)方法1:`quadraticCurveTo()`
實際上在繪制圓形時使用了 `ink` 的方法,比如 `stroke()` 或者 `fill()`
```
context.quadraticCurveTo(cpx, cpy, x, y)
```
arc參數如下:
| 參數 | 描述 |
| --- | --- |
| cpx | 貝塞爾控制點的 x 坐標 |
| cpy | 貝塞爾控制點的 y 坐標 |
| x | 結束點的x坐標 |
| y | 結束點的y坐標 |
# (二)方法2:`bezierCurveTo()`
```
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
```
arc參數如下:
| 參數 | 描述 |
| --- | --- |
| cp1x | 第1個貝塞爾控制點的 x 坐標 |
| cp1y | 第1個貝塞爾控制點的 y 坐標 |
| cp2x | 第2個貝塞爾控制點的 x 坐標 |
| cp2y | 第2個貝塞爾控制點的 y 坐標 |
| x | 結束點的x坐標 |
| y | 結束點的y坐標 |
- 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官網
- 示例