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点钟。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

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

    下面我们举例说明。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>

作业：请自己练习画一个圆