复习上节内容：改变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度的工程。效果图如下

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

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

查看原文