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