Canvas小结（canvas-转换）

scale() 方法缩放当前绘图，更大或更小。

scale()

    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');
    ctx.strokeRect(5,5,25,15);
    //context.scale(scalewidth,scaleheight); 1=100%, 0.5=50%, 2=200%, 依次类推
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);

retate()方法旋转当前的绘图

retate()

    var c2 = document.getElementById('mycanvas2');
    var ctx2 = c2.getContext('2d');
    //context.rotate(angle);
    /*
    旋转角度，以弧度计。
    如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
    举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。
    */
    ctx2.rotate(20*Math.PI/180);
    ctx2.fillRect(20,20,150,100);

translate()方法重新映射画布上的(0,0)位置

translate()

    var c3 = document.getElementById('mycanvas3');
    var ctx3 = c3.getContext('2d');
    ctx3.fillRect(10,10,50,30);
    ctx3.translate(70,70);
    ctx3.fillRect(10,10,100,50);

transform()方法替换当前的变换矩阵

transform()

    var c4 = document.getElementById('mycanvas4');
    var ctx4 = c4.getContext('2d');
    ctx4.fillStyle = 'yellow';
    ctx4.fillRect(0,0,250,120);
    ctx4.transform(1,0.5,-0.5,1,30,10);
    ctx4.fillStyle = 'red';
    ctx4.fillRect(0,0,250,120);
    ctx4.transform(1,0.5,-0.5,1,30,10);
    ctx4.fillStyle = '#00f';
    ctx4.fillRect(0,0,250,120);