canvas学习之圆和圆弧的绘制

·  阅读 116

复习

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

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改