HTML5 canvas中的转换方法

转换方法
scale(scalewidth,scaleheight)                缩放当前绘图至更大或更小
scalewidth         缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight         缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

rotate(angle)                旋转当前绘图
angle         旋转角度，以弧度计。
                如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
                举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

translate(x,y)                重新映射画布上的 (0,0) 位置
x         添加到水平坐标（x）上的值
y         添加到垂直坐标（y）上的值

transform(a,b,c,d,e,f)        替换绘图的当前转换矩阵
a         水平缩放绘图
b         水平倾斜绘图
c         垂直倾斜绘图
d         垂直缩放绘图
e         水平移动绘图
f         垂直移动绘图

setTransform(a,b,c,d,e,f)        将当前转换重置为单位矩阵。然后运行 transform()
a         水平旋转绘图
b         水平倾斜绘图
c         垂直倾斜绘图
d         垂直缩放绘图
e         水平移动绘图
f         垂直移动绘图

    <canvas id="f" width="500" height="450" style="border:1px solid #000"></canvas>
    <script type="text/javascript">
    var a=document.getElementById("f");
    var ctx=a.getContext("2d");
    ctx.strokeRect(20,20,30,30);
    ctx.scale(2,2);                                        //缩放当前绘图至更大或更小
    ctx.strokeRect(20,20,30,30);

    ctx.fillRect(120,20,30,20);
    ctx.translate(30,30);                        //重新映射画布上的 (0,0) 位置
    ctx.fillRect(120,20,30,20);

    //缩放当前绘图至更大或更小
    ctx.rotate(25*Math.PI/180);
    ctx.fillRect(50,50,100,10);

    ctx.fillStyle="green";
    ctx.fillRect(20,50,10,20);
    ctx.transform(2,0.5,-0.5,2,50,0);//替换绘图的当前转换矩阵
    ctx.fillStyle="red";
    ctx.fillRect(20,50,10,20);

    ctx.fillStyle="yellow";
    ctx.fillRect(0,0,50,20)

    ctx.setTransform(1,0.5,-0.5,1,30,10);//将当前转换重置为单位矩阵。然后运行 transform()
    ctx.fillStyle="red";
    ctx.fillRect(0,0,50,20);

    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,50,20);
    </script>