1 变换操作

Canvas变换需要注意的问题：

变换（位移，缩放，旋转）元素: 改变图形的所有坐标点，相当于重新绘制坐标点，位移坐标写好之后，后续的图形坐标要参照此时的新坐标，但是，之前的盒子不会受影响

1.1 位移

ctx.translate(x,y);

参数说明：

• x： 添加到水平坐标（x）上的值

• y： 添加到垂直坐标（y）上的值

发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。

位移画布一般配合缩放和旋转等。

1.2 缩放

ctx.scale(scaleWidth, scaleHeight);

参数说明：

• scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

• scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

1.3 旋转

ctx.rotate(angle)

参数 angle 是弧度

如需将角度转换为弧度，请使用 角度*Math.PI/180 公式进行计算。