为绘制上下文应用变换,会导致使用不同的变换矩阵应用处理,从而产生不同的结果。
(1)rotate(angle):围绕原点旋转图像angle弧度(弧度=角度乘以π后再除以180,角度=弧度除以π再乘以180)。正值表示顺时针方向旋转,负值表示逆时针方向旋转。
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.save();//保存记录画布当前状态 context.fillStyle = 'rgba(280,187,188,0.5)'; context.fillRect(0,0,100,50);
context.rotate(Math.PI/6); context.fillStyle = 'rgba(180,187,188,0.5)'; context.fillRect(0,0,100,50); context.restore();//恢复变换前的矩阵状态
(2)scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY,两者默认值为1.0。
context.save(); context.strokeStyle = "rgba(31,37,38,0.5)"; context.lineWidth = 1; context.strokeRect(150,0,100,100);
context.scale(0.5,0.5); context.strokeRect(150,0,100,100);//scale(0.5,0.5)后,距离、边宽也随之缩放0.5倍。 context.restore();
(3)translate(x, y):将坐标原点移到(x, y)。
context.save(); context.fillStyle = 'rgba(280,187,188,0.5)'; context.fillRect(0,200,100,50);
context.translate(100,100); context.fillStyle = 'rgba(280,187,188,0.5)'; context.fillRect(0,200,100,50); context.restore();
(4)transform(m1_1, m1_2, m2_1, m2_2, dx, dy):直接修改变换矩阵。
context.save(); context.fillStyle = 'rgba(280,187,188,0.5)'; context.fillRect(280,0,100,50);
context.transform(1,Math.PI/6,-Math.PI/6,1,100,100);//两个1代表画布进行缩放,Math.PI/6表示顺时针旋转30度,(100,100)表示平移 context.fillStyle = 'rgba(180,187,188,0.5)'; context.fillRect(280,0,100,50); context.restore();
(5)setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):将变换矩阵重置为默认状态,然后再调用transform()。
context.fillStyle = 'rgba(280,187,188,0.5)'; context.fillRect(280,0,100,50); context.transform(1,Math.PI/6,-Math.PI/6,1,100,100);//两个1代表画布进行缩放,Math.PI/6表示顺时针旋转30度,(100,100)表示平移 context.fillStyle = 'rgba(180,187,188,0.5)'; context.fillRect(280,0,100,50); context.setTransform(1,Math.PI/6,Math.PI/6,1,100,100); context.fillStyle = 'rgba(180,187,188,0.5)'; context.fillRect(280,0,100,50);