HTML5 Cavans(5) 平移 缩放 旋转

translate平移，接受2个参数，分别是x和y轴平移位置，平移的是绘图原点，之后绘图的原点就是平移后的位置，之前的图位置不变

scale 缩放，接受2个参数，分别是x和y缩放系数，1是原来大小，也是对之后绘图影响，之前图没影响

rotate旋转，参数是旋转度数，顺时针

            var cancans = document.getElementById("myCanvas");
            //得到2D渲染上下文
            var context = document.getElementById("myCanvas").getContext("2d");

            context.save()//保存状态，以便恢复
            //平移
            context.fillRect(0, 0, 50, 50);

            context.translate(100, 100);
            context.fillRect(0, 0, 50, 50);

            context.translate(100, 100);
            context.fillRect(0, 0, 50, 50);

            context.fillStyle = "red";

            //平移缩放结合
            context.translate(100, 100); //当前绘图原点(300,300)
            context.scale(1, 2); //x坐标不缩放，y坐标变成2倍
            context.fillRect(0, 0, 50, 50);

            context.restore()//恢复状态，将绘图原点重置
            context.fillStyle = "blue";
            context.fillRect(0, 0, 25, 25);

            //旋转45度，默认是顺时针
            context.translate(100, 100);
            context.rotate(Math.PI / 4);
            context.fillRect(50, 50, 50, 50);