Canvas的圖形變換

在圖形學中，一般先畫出原形，再通過圖像變換得到目的圖形

Canvas提供的圖形變換API：

位移：translate(x,y)
旋轉：rotate(deg)
縮放：scale(se,sy)：不單隻放大圖形大小，也會放大其他屬性
!在Canvas的圖形變換函數是疊加的，
所以：
繪製前：context.save()
繪製後：context.restore()

   function drawStar(cxt,x,y,R,rot){

        cxt.save();
        
        //圖形變換
        cxt.translate(x,y);
        cxt.rotate(rot/180*Math.PI);
        cxt.scale(R,R);
        
        cxt.beginPath();
        starPath(cxt);
        cxt.closePath();

        cxt.fillStyle="#fb3";
        cxt.fill();
        
        cxt.restore();
    }

    function starPath(cxt){
        cxt.beginPath();
        for(var i=0;i<5;i++) {

            cxt.lineTo(
                    Math.cos((18 + i * 72) / 180 * Math.PI),
                    -Math.sin((18 + i * 72 )/180 * Math.PI)
            );
            cxt.lineTo(
                    Math.cos(( 54 + i * 72) /180 * Math.PI)*0.5,
                    -Math.sin((54 + i * 72) /180 * Math.PI)*0.5
            );

        }
        cxt.closePath();
    }

變換矩陣
|a c e|
|b d f|
|0 0 1|
a水平縮放（默認1）
b水平傾斜（默認0）
c垂直傾斜（默認0）
d垂直縮放（默認1）
e水平位移（默認0）
f垂直位移（默認0）

設置變換矩陣 ：

transform(a,b,c,d,e,f):與之前transfrom效果疊加

settransform(a,b,c,d,e,f):與之前transfrom效果無關