canvas学习18之canvas的旋转

复习上节内容：改变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)方法。

  • 首先，我们建立绘画上下文对象

    1
    2
    3
    4
    5
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
    const canvas = document.getElementById('mycanvas')
    const ctx = canvas.getConText('2d')
    </script>

  • 接下来，为了方便演示canvas的旋转，利用上节学习过的移动canvas原点的方法，我们把原点水平和垂直各移动250个单位，移动到canvas正中间。

    1
    2
    3
    4
    5
    6
    <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轴位置，并将此状态保存。这里，我们复习了之前用到的很多知识点哦，请注意复习。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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条线来。在这个过程中，我们使用了状态的恢复和保存，角度弧度的转换，记得复习。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <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度重合在了一起。