canvas图形变换

为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。

（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);