web前端：Canvas 基础（二）
0.前言
相信各位小伙伴读了之前的文章，对Canvas基础已经有了一定的认识和了解，但是大家也一定记得我在上一篇文章留了一个小的坑。
就是我没有告诉大家该如何去绘制圆，之所以没有说是因为绘制圆实际上是因为CanvasRenderingContext2D对象只提供了两个绘制矩形的方法，并没有直接提供绘制圆，椭圆等几何图形的方法。为了在Canvas上绘制更复杂的方法，必须在Canvas上启用路径，借用路径来绘制图形。
那么我们现在就一起来看一看，该如何使用路径来绘制圆等图形吧。
------------------我是华丽的分割线----------------------
1.使用路径
在Canvas上使用路径，可按照下面的步骤进行。
- 调用CanvasRenderingContext2D对象的beginPath（）方法开始定义路径。
- 调用CanvasRenderingContext2D的各种方法添加子路径。
- 调用CanvasRenderingContext2D的closePath方法关闭路径。
- 调用CanvasRenderingContext2D的fill（）或stroke（）方法来填充路径或者绘制路径边框。
那我们明确了该如何去进行应该怎么去使用路径，那么我们接下来就来介绍一下canvas中添加子路径的方法。
| - | - |
|---|---|
| arc（float x，float y，float radius，float startAngle，float endAngle，boolean逆时针） | 向画布的当前路径上添加一段弧。绘制以x，y为圆心，radius为半径，从startAngle角度开始，到endAngle角度结束的圆弧.startAngle和endAngle以角度为单位。 |
| arcTo（float x1，float x2，float y1，float y2，float radius） | 向画布的当前路径上添加一段弧。与上一个方法不同的地方只是定义弧的方式不同。 |
| bezierCurveTo（float cpX1，float cpY1，float cpX2，float cpY2，float x，float y） | 在当前路径上添加一段贝塞尔曲线 |
| quadraticCurveTo（float cpX，float cpY，float x，float y） | 向帆道当前路径添加一段二次贝塞尔曲线 |
| rect（float x，float y，float width，float height） | 向画布的当前路径上添加一个矩形 |
方法就这些，但是参数就显得非常多了，咱们来一条条的来看看这些方法的具体使用吧。
1.1绘制圆
首先我们来学习下如何绘制圆，首先明确，我们应该去使用arc（）方法，那么我们该如何去使用这个方法呢？
咱们，放“码”过来。
Document
绘制圆形
最后实现效果如下：
Paste_Image.png
不知道小伙伴们是否看懂了上面的程序呢？
如果没看懂也无所谓，咱们就来一起说一说上面内容中的难点。
首先说一下，Math.PI实际上指代的就是π，换而言之也就是180°，那么我们上面使用的角度是Math.PI * 2，也就是绘制了一个圆形。
再说之后一下arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise)这个方法。
里面一共有6个参数，这六个参数实际上对应的是：
| - | - |
|---|---|
| 浮动x | 指定圆弧的圆心的X坐标 |
| 漂浮 | 指定圆弧的圆心的Y坐标 |
| 浮动半径 | 指定圆弧的半径 |
| float startAngle | 设置圆弧的开始角度 |
| float endAngle | 设置圆弧的结束角度 |
| boolean逆时针 | 设置是否顺时针旋转 |
这样不知道大家对我们绘制圆是否清楚明白了呢？
如果有任何疑问请及时留言回复呦。
1.2绘制圆角矩形
我们之前已经学习过绘制圆形，也学习过绘制矩形，甚至我们也可以通过lineJoin去对我们的元素的圆角去进行修改。
但是，固定的东西我们不需要，我们真正需要的是可以自定义，可以根据我们想要的效果能够随意订制的内容。
为了做到这个目的，我们还可以去使用arcTo来去绘制一段圆弧。
Document
绘制圆形
注意，我在这里分别绘制了四条线和四个弧度角，并且让他们首尾相连，以此来达到绘制矩形框的作用。
其次就是专门去封装了一个函数，用于绘制圆角矩形，回头有需要的小伙伴可以直接自行粘贴呦。
1.3绘制多角形
不知道大家对之前绘制三角形是否还记得？
我们在绘制三角形的时候，主要是去使用lineTo和moveTo这两个方法，可是我们在生活中遇到的图形远远不止这么几种图形。
那么我们今天就来学习一下如何去绘制多角形。
Document
绘制多角形
可以看到我们又去封装了一个方法，专门用于绘制多角星，当然我们也可以在这个基础之上去继续拓展，这些就需要看小伙伴们的发挥啦。
Paste_Image.png
1.4绘制曲线
还记得我们在一开始的时候我们学习了五个方法，除了现在已经学习的绘制圆和绘制圆角矩形，是不是还有一些奇奇怪怪的方法？
那么我们现在就开始来学习这些方法。
首先先来学习一下，添加贝塞尔曲线。
| - | - |
|---|---|
| bezierCurveTo（float cpX1，float cpY1，float cpX2，float cpY2，float x，float y） | 在当前路径上添加一段贝塞尔曲线 |
| quadraticCurveTo（float cpX，float cpY，float x，float y） | 向帆道当前路径添加一段二次贝塞尔曲线 |
首先来看看第一个方法，第一个方法中实际上有四个点需要注意。
Paste_Image.png
他们分别是
- 的左下角开始点
- 红色粉的第一个控制点（锚点）
- 的藏青色第二个控制点（锚点）
- 的右上角结束点
而方法中cpX1和cpY1则是控制第一个控制点的坐标，
后面的cpX2和cpY2则是控制第二个控制点的坐标。
而二次贝塞尔曲线又是怎么回事呢？
Paste_Image.png
和正常贝塞尔不同，二次曲线只需要三个点：
- 的左下角开始点
- 的藏青色控制点
- 的右上角结束点
方法中的cpX和cpY则是去设置控制点的坐标。
那么我们来一起试一试，该如何去绘制一个个花朵。
Document
绘制花朵
1.5绘制位图
一直到现在我们讲了如何去绘制线，三角形，多角星，矩形，圆，花朵，圆角矩形等各种图形。
但是除了这些基础图形之外，我们还可以去绘制“位图”，让一张图片绘制在我们的画布之上。
那我们怎么来做呢？
我们既然想将我们的图片载入到我们的画布中，怎么做呢？我们先来差混构建一个Image对象。
var image = new Image();
image.src = "itwangyang.png";
需要注意两点，
- 我们的程序只是创建，加载图片，所以调用image时无需传入宽度和高度，这样创建的图像将会与src属性指定的图片保持相同的宽度和高度。
- 我们可以使用onload去保证我们一定是在图片加载完成后再绘制。
var image = new Image();
image.src = "itwangyang.png";
image.onload = function(){
//绘制图片
}
学习了如何去加载图片，我们就可以向我们的画布中添加图片了么？
没有方法你怎么去添加图片呀，魂淡。
我们还要学习添加图片的方法，这里跟大家说三种方法。
| - | - |
|---|---|
| drawImage（图像，float x，float y） | 把图像绘制在x，y处。该方法不会对图片做任何缩放处理，绘制处理的图片保持原来的大小 |
| drawImage（图像，浮动x，浮动y，浮动宽度，浮动高度） | 把图像绘制在x，y处。该方法会对图片进行缩放，绘制出来的宽度为width，高度为height。 |
| drawImage（图像，整数sx，整数sy，整数sw，整数sh，float dx，float dy，float dw，float dh） | 该方法将会从图像上“挖出”一块绘制到画布上。其中sx，sy两个参数控制从原图片上的哪一个位置开始挖去，sw，sh两个参数控制从原图片挖球的宽度和高度; dx，dy两个参数控制把挖取的图片绘制到画布上的哪个位置，而dw，dh则控制对绘制图片进行缩放，绘制出来的宽度是dw，高度dh |
我们知道了方法，那就来一起学习下，该如何用代码来实现吧。
Document
绘制位图
讲到这里，大家都理解的差不多了吧。如果还不太明白或者还要深入学习的话，欢迎大家在下方留言，我会再抽出时间来，与大家一起分享这其中的奥秘......