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

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

坐标系方向为：画布向右为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并没有跟着旋转。由此可见，画布的旋转其实应该是坐标系的旋转。而之前已经产生的图像，是不会跟着旋转的。