在 `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官网
- 示例