直线图形
- canvas中基本图形有两种：直线和曲线。常见的直线图形有：直线、矩形、多边形
- canvas使用W3C坐标系，不同于常见的数学坐标系，W3C坐标系y轴正方向向下
直线
直线的绘制方法
| 方法 | 说明 |
|---|---|
| moveTo(x1,y1) | 将画笔移动到x1，y1坐标 |
| lineTo(x2,y2) | 从当前坐标开始到（x2,y2）坐标画直线 |
| stroke() | 绘制 |
多条直线
多条直线：lineTo方法可以重复使用，每次使用后，画笔自动移动到终点，下一次使用会以上一次的终点为起点
矩形
- 矩形可以使用lineTo绘制，但是代码冗余，canvas提供了绘制矩形的方法
- 在canvas中，矩形分为描边矩形和填充矩形
描边矩形：strokeStyle属性和strokeRect()方法
- strokeStyle属性表示矩形边的颜色或图案，有三种取值：颜色值、渐变色、图案。颜色值可以使用英文关键字red、十六进制#00ff00、rgb、rgba表示。该属性一定要设置在strokeRect()方法之前才会生效
- strokeRect()方法有四个参数，含义分别为（矩形起点x坐标，矩形起点y坐标，矩形宽度，矩形高度）
填充矩形：fillStyle属性和fillRect()方法
- fillStyle属性表示矩形内的颜色或图案，设置同strokeStyle属性一致
- fillRect()方法的参数和对应含义同strokeRect()方法一致
Rect()方法
- 除了使用strokeRect()方法和fillRect()方法以外，绘制矩形还可以使用Rect()方法，方法的参数和对应含义和前面两种方法一致，不同的是，前面两种方法会立刻把矩形绘制出出来，但是Rect()方法需要配合stroke()方法或fill()方法使用
清空矩形：clearRect()方法，
- 方法对应的参数和含义同strokeRect()方法
- ctx.clearRect(0,0,cnv.width,cnv.height)用于清空整个canvas
多边形：多边形的绘制一般都是结合moveTo和lineTo方法和Math进行绘制
练习：绘制箭头、封装绘制正多边形的方法、绘制五角星、绘制方格调色板和渐变调色板
曲线图形
- 曲线图形一般涉及两种情况：曲线和弧线，弧线是圆的一部分，弧线上的每一段都具有相同的曲率，曲线则不一定，曲线包含弧线
圆形
描边圆&填充圆：arc(圆形横坐标，圆心纵坐标，半径，开始角度，结束角度，anticlockwise)方法。
- 开始角度和结束角度都是以弧度为单位，如180度应为Math.PI，实际开发中推荐使用：度数*Math.PI/180的写法，这样可以一眼看出度数
- anticlockwise是一个布尔值，表示绘制的方向，true表示逆时针绘制，false表示顺时针绘制
- 该方法只是对圆形的一个状态描述，类似lineTo()，还需要对圆进行描边（strokeStyle、stroke()方法）或者填充（fillStyle、fill()方法）才会有实际效果
- 绘制圆形的步骤：开始路径beginPath→arc描述圆形状态→ 结束路径closePath→ 描边或填充（两种操作可以同时存在）
弧线
arc方法
- 不要使用closePath闭合路径，该方法会将曲线的首尾相连
arcTo方法：arcTo(cx,cy,x2,y2,radius)（数据含义如图所示）
二次贝塞尔曲线
- 弧线和曲线是两个不同的概念
- 绘制二次贝塞尔曲线的方法：quadraticCurveTo(cx,cy,x2,y2)，相关数据含义如图
- 绘制二次贝塞尔曲线需要三个点：开始点、控制点和结束点，开始点由moveTo或者lineTo提供，函数只为我们定义控制点和结束点
- 通过开始点、控制点和结束点绘制二次贝塞尔曲线的过程图解
三次贝塞尔曲线
- 绘制三次贝塞尔曲线的方法：bezierCurveTo(cx1,cy1,cx2,cy2,x,y)，相关数据含义如图
- 三次贝塞尔曲线和二次贝塞尔曲线的唯一区别在于：三次贝塞尔曲线有两个控制点，而二次贝塞尔曲线只有一个控制点
- 通过开始点、控制点1、控制点2和结束点绘制三次贝塞尔曲线的过程图解
