复习上节内容：改变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)方法。
- 首先，我们建立绘画上下文对象
<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度重合在了一起。
查看原文
