canvas学习18之canvas的旋转

·  阅读 380

复习上节内容:改变canvas圆心的位置

上一节中,我们学习了如何改变一个canvas的圆心,及改变后的坐标轴展现方式,我们现在来复习一下。

  • 改变canvas的圆心:使用translate(x,y)方法,我们可以改变canvas圆心的位置。x表示圆心在水平方向上的偏移量,y表示圆心在垂直方向的偏移量。

  • 改变圆心位置后的坐标轴展示方式。坐标轴垂直方向为y轴,原点以上为负,原点以下为正,x和我们日常生活中用到的一样。

学习:canvas的旋转

上节课我们学会了移动圆心的位置,这节课我们来学习,如何来将canvas进行旋转。

要将canvas进行旋转,我们需要用到一个新的方法,他叫rotate(angle), angle是旋转的弧度数,按顺时针方向旋转。

标重点js中弧度和角度的转换公式: 弧度 = (Math.PI/180) * 角度。角度 = 弧度 * (180/Math.PI)

下面,我们通过动手来切实学习ratate(angle)方法。

  • 首先,我们建立绘画上下文对象
```html
<canvas id="mycanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getConText('2d')
</script>
```
复制代码
  • 接下来,为了方便演示canvas的旋转,利用上节学习过的移动canvas原点的方法,我们把原点水平和垂直各移动250个单位,移动到canvas正中间。

    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.getElementById('mycanvas')
      const ctx = canvas.getConText('2d')
      ctx.translate(250,250) 
    </script>
    复制代码
  • 接下来,在没有旋转的x轴正半轴上,我们画一条线,标出未旋转前的x轴位置,并将此状态保存。这里,我们复习了之前用到的很多知识点哦,请注意复习。

    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.getElementById('mycanvas')
      const ctx = canvas.getConText('2d')
      ctx.translate(250,250) 
      ctx.beginPath()
      ctx.strokeStyle = 'green'
      ctx.moveTo(0,0)
      ctx.lineTo(200, 0)
      ctx.fillText('没旋转前', 50, 0)
      ctx.stroke()
      ctx.closePath()
      ctx.save()
    </script>
    复制代码
  • 最后,我们使用rotate(angle)来旋转canvas,并且每次旋转后都将x轴正半轴的位置标出来。为了使标出来的线不至于很凌乱,我们每隔30度旋转一下,标出从0到360的12条线来。在这个过程中,我们使用了状态的恢复和保存,角度弧度的转换,记得复习。

<canvas id="mycanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('mycanvas')
  const ctx = canvas.getConText('2d')
  ctx.translate(250,250) 
  ctx.beginPath()
  ctx.strokeStyle = 'green'
  ctx.moveTo(0,0)
  ctx.lineTo(200, 0)
  ctx.fillText('没旋转前', 50, 0)
  ctx.stroke()
  ctx.closePath()
  ctx.save()
  for (let i = 0; i <= 12; i++) {
    let jiaodu = 30 * i
    let ratateAngle = (Math.PI / 180) * jiaodu
     ctx.restore() // 将canvas恢复到未旋转前的状态
     ctx.save() // 保存未旋转前的状态
    ctx.rotate(ratateAngle)
    ctx.beginPath()
    ctx.strokeStyle = '#e74478'
    ctx.moveTo(0,0)
    ctx.lineTo(200, 0)
    ctx.fillText('旋转' + jiaodu , 20 + 12 * i, 0)
    // ctx.font = '20px sans-serif'
    ctx.stroke()
    ctx.closePath()
}
</script>
复制代码

到这里,我们完成了canvas的每隔30度一个旋转,将canvas旋转360度的工程。效果图如下

canvas旋转

可以点击这里查看具体实例,自己进行修改操作,可以自己尝试一下,如果不用状态恢复保存的方法,如何将360度都画出来。

我们可以看到,在旋转的过程中,x轴发生了相应的变化。最后旋转前,和360度重合在了一起。

查看原文

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