复习

上一节中学习了绘制三角形和绘制矩形。其中三角形的绘制是利用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>
  

<iframe height="265" style="width: 100%;" scrolling="no" title="learn canvas 4-1" src="https://codepen.io/zhangxiaochunxy/embed/XWbgyrj?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/zhangxiaochunxy/pen/XWbgyrj'>learn canvas 4-1</a> by 张小春Nathan
  (<a href='https://codepen.io/zhangxiaochunxy'>@zhangxiaochunxy</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

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

<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>

<iframe height="300" style="width: 100%;" scrolling="no" title="ExjXOXw" src="https://codepen.io/zhangxiaochunxy/embed/ExjXOXw?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/zhangxiaochunxy/pen/ExjXOXw'>ExjXOXw</a> by 张小春Nathan
(<a href='https://codepen.io/zhangxiaochunxy'>@zhangxiaochunxy</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

• 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>
  

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