在上一篇文章中已经讲了canvas的基本用法，这一篇就开始讲讲如何通过创建的上下文绘制各种形状，如矩形等。
绘制矩形
canvas只支持一种原生的图形绘制：矩形。而其他图形的绘制都需要依赖路径，canvas提供了三种方法来绘制矩形：
1.fillRect(x, y, width, height) 绘制一个填充的矩形
See the Pen BrpdaL by LCINA (@LCINA) on CodePen.
2.`strokeRect(x, y, width, height)` 绘制一个带边框的矩形See the Pen Gxrvpo by LCINA (@LCINA) on CodePen.
3.`clearRect(x, y, width, height)` 清除指定区域，使清除部分透明See the Pen bvgrwW by LCINA (@LCINA) on CodePen.
绘制路径
Photoshop的钢笔工具，其实就是通过路径绘制比较复杂的图形，比如花朵、人物等。图形的基本元素是路径，路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。绘制路径所需要的函数：beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。stroke() 通过线条来绘制图形轮廓。fill() 通过填充路径的内容区域生成实心的图形。
当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制三角形
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。所以绘制三角形首先需要一个起点，通过函数moveTo(x, y)确定起点坐标位置。有了坐标起点，就可以通过线段绘制出三角形，通过函数lineTo(x, y)确定线段落点位置，这里需要设置两个落点绘制。最后通过函数ctx.fill()使绘制的三个点闭合，形成一个填充的三角形。如果需要绘制带边框的三角形，则通过ctx.closePath(); ctx.stroke();，其中ctx.closePath()用来闭合路径的。
See the Pen zWNdeg by LCINA (@LCINA) on CodePen.
移动笔触
moveTo(x, y) 将笔触移动到指定的坐标x以及y上。当canvas初始化或者beginPath()调用后，通常会使用moveTo()函数设置起点。
线
lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。
圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
| 参数 | 描述 |
|---|---|
| x | 圆心x轴坐标 |
| y | 圆心y轴坐标 |
| radius | 圆半径 |
| startAngle | 起始角，以弧度记 |
| endAngle | 结束角，以弧度记 |
| anticlockwise | false[默认]：顺时针，true：逆时针 |
arc()函数中的角度单位是弧度，不是度数。
角度与弧度的js表达式:radians=(Math.PI/180)*degrees。其中radians为弧度，degress为角度。四分之一圆：ctx.arc(50,50,20,0,(Math.PI/180)*90)。例子如下：
See the Pen aYpLrw by LCINA (@LCINA) on CodePen.
绘制曲线
canvas提供了一个绘制曲线的方法arcTo(x1, y1, x2, y2)，该方法需要结合moveTo(x, y)一起使用。
(x, y)表示曲线起点。(x1, y1)是控制点，用来控制曲线弯曲方向（曲线并不一定会经过控制点）。(x2, y2)是结束点（曲线并不一定会经过结束点）。r表示圆弧的半径，用来控制曲线弧度的大小。
See the Pen rdjYWw by LCINA (@LCINA) on CodePen.
二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
See the Pen pLRdpR by LCINA (@LCINA) on CodePen.
三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
See the Pen gegXxN by LCINA (@LCINA) on CodePen.