canvas学习之圆和圆弧的绘制

复习

上一节中学习了绘制三角形和绘制矩形。其中三角形的绘制是利用lineTo(x,y)方法来实现的，学会绘制三角形后，矩形，五角形等更多其它类型的图形，我们都可以做出来了。但是，绘制矩形还有简单的方法，分别是fillReact(x,y,width;height)和strokeRect(x,y,width;height)。另外我们还学习了给图形形上色的一个新的方法fill()。还有一个旧知识的翻新是closePath(),它不仅仅是结束笔触，还能有闭合图形的能力。

学习:绘制圆和圆弧

理论上将，我们可以用已经学习过的方法画一个圆出来，但那样做的工作量，可能是一个很大的数量级，会给机器的运行带来一定的压力。所以，直接用已有的接口来绘制圆或者圆形是不太现实的。为了能够方便的绘制圆形和圆弧，canvas为我们提供了两个接口。

arc(x,y,radius,starAngle, endAngle, anticlockwise)

x和y是圆的远点。radius是圆的半径。starAngle和 endAngle是以时钟的开始角度和结束角度。anticlockwise表示开始角度和结束角度是否按逆时针方向，是一个布尔值，为true表示按照逆时针方向，不填或者为false表示按照顺时针方向。在arc()函数中，表示角的大小的函数是弧度，不是角度，换算公式为：1弧度 = （Math.PI/180）

如下：当我们按顺势针旋转时,圆是从三点钟方向开始旋转，而不是我们平常认为的0点钟。
```
<canvas width="500" height="500" id="mycanvas4"></canvas>
<style>
canvas{
  border:solid red 1px;
}
</style>
<script>
let canvas = document.getElementById('mycanvas4')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.arc(250, 250, 250,0, Math.PI / 180 * 200 , false)
  ctx.stroke()
} else {
  console.log('浏览器不支持canvas')
}
</script>
```
See the Pen learn canvas 4-1 by 张小春Nathan (@zhangxiaochunxy) on CodePen.

当我们选择逆时针旋转时，圆的旋转点不变，结束角度越小，圆弧越大。

<canvas width="500" height="500" id="mycanvas4"></canvas>
<style>
canvas{
  border:solid red 1px;
}
</style>
<script>
let canvas = document.getElementById('mycanvas4')
if (canvas.getContext) {
  let ctx = canvas.getContext('2d')
  ctx.arc(250, 250, 250, 0, Math.PI / 180 * 100, true)
  ctx.stroke()
} else {
  console.log('浏览器不支持canvas')
}
</script>

See the Pen ExjXOXw by 张小春Nathan (@zhangxiaochunxy) on CodePen.

arcTo(x1,y1,x2,y2,rudius)这个方法是在已经知道的亮点上画一个弧线，x1和y1是一个点，x2和y2是另外一个点，rudius是弧线半径。需要注意的是，这个方法需要落笔。也就是首先开始用moveTo(x,y)方法。

下面我们举例说明。

<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
 let canvas = document.getElementById('mycanvas')
 if (canvas.getContext){
    let ctx = canvas.getContext('2d')
    ctx.moveTo(150, 20)
    ctx.crcTo(150, 100, 50, 20,30)
    ctx.stroke()
 }
</script>

作业：请自己练习画一个圆原文链接