微信小程序之画布的旋转，你搞懂了吗？

最近在学习微信小程序的时候，学习到画布时，旋转功能把我有点搞糊涂了。因为我一直以为，旋转的是画布，但其实，旋转的是坐标系。

坐标系方向为：画布向右为x，向左为-x，向上为-y，向下为y

程序示例如下：

    ctx.translate(width/2,height/2) //重新定位坐标原点为画布中心

    ctx.rotate( 30 / 180 * Math.PI);  //画布旋转30°
    ctx.beginPath();          //绘制线条1
    ctx.moveTo(0, -115);  
    ctx.lineTo(0, -120);  
    ctx.stroke();  
      
    ctx.beginPath();          //绘制线条2
    ctx.moveTo(0, -105);  
    ctx.lineTo(0, -110);  
    ctx.stroke();  

    ctx.draw();

显示结果如下：

程序中，仅调用过一次画布旋转，然后绘制了两个线条，两个线条x坐标都为0，线条处于y轴上。且y轴明显是旋转过的。

程序示例2：

   ctx.translate(width/2,height/2) //重新定位画布中心为原点

    ctx.rotate( 30 / 180 * Math.PI); //画布旋转30° 
    ctx.beginPath();                  //绘制线条1
    ctx.moveTo(0, -115);  
    ctx.lineTo(0, -120);  
    ctx.stroke();  
      
    ctx.rotate( 30 / 180 * Math.PI);    //画布再旋转30°  
    ctx.beginPath();                    //绘制线条2
    ctx.moveTo(0, -105);  
    ctx.lineTo(0, -110);  
    ctx.stroke();  

    ctx.draw();

显示结果如下：

示例2与示例1相比，线条坐标完全没有改变，仅仅是在线条2绘制前旋转了30°。但是线条1并没有跟着旋转。由此可见，画布的旋转其实应该是坐标系的旋转。而之前已经产生的图像，是不会跟着旋转的。