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
公式进行计算。