HTML5 - canvas : transformations

這篇所有綠色的方框都是個別效果的基本樣式，然後每一個範例都有先回復到上一個樣式再將已經回復的樣式存起來，所以每個樣式的繪圖起始樣式都是用base的樣式去做複製延伸，如果沒有這個儲存回覆的動作，就會因為<canvas>的樣式繼承特性，在同一個<canvas>裡面的繪圖物件都會繼承上一個繪圖物件的樣式，繪製出來的物件就會亂跑。

HTML

<canvas id="myCanvas1" width="600" height="300"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas1')[0].getContext('2d');

  //basic style
  cxt.strokeStyle="#91B766";
  cxt.strokeRect(10,10,100,100);
  cxt.save();//保存這個basic樣式的設定。
  
  //translate
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(120,10,100,100);
  cxt.translate(120,10);//重製一個x:120，y:10的這個物件在畫布的x:120，y:10的地方。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,10,100,100);
  
  //scale
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(300,10,100,100);
  cxt.scale(0.5,0.5);//重製一個x:300，y:10的這個物件在畫布上，並按照比例縮放50%。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(600,20,100,100);
  
  //rotate
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(499,10,100,100);
  cxt.translate(499,10);//給予選轉的物件新的x軸與y軸。
  cxt.rotate(5*Math.PI/180);//旋轉正5度。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(499,10,100,100);//這個物件的x,y就是這個物件選轉的圓心。
  
  //transform
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(10,150,100,100);
  cxt.transform(1,0,0.5,1,-75,0);//繪製一個平行垂直傾斜90*0.5度的平行四邊形。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,150,100,100);
  //setTransform
  cxt.setTransform(1,0,0,1,0,0);//不會繼承到上一個平行四邊形的樣式，直接重新繪製一個正方形。
  cxt.strokeStyle='#B09BC0';
  cxt.strokeRect(110,150,100,100);
  
  //Mirror
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.scale(1,-1);//用y軸的-1將Hello!垂直反轉成倒過來的文字。
  cxt.font='50px Arial';
  //因為文字被整個垂直反轉，所以y軸必須使用負值讓文字重新回到<canvas>裡面，不然文字會跑出<canvas>外面。
  cxt.fillText('Hello!',350,-180);
});

主要使用function :

1. save() - 保存當前環境狀態，會以堆存的方式被放進保存清單裡面，如果存入過多資料，會造成系統負擔。
2. restore() - 回復到上一個保存過的路徑狀態跟屬性。
3. transformations -
   

   語法	解說
   translate(新物件在畫布上的x軸, 新物件在畫布上的x軸);	重新複製物件在對照畫布(0,0)的地方。
   scale(縮放的寬比例, 縮放的高比例);	縮放的比例以1為原比例，0.5為50%的比例，2為200%的比例，以此類推，負值為將物件鏡射。
   rotate(角度*Math.PI/180);	需要以(角度*Math.PI/180)的公式照計算出圓弧的弧度，並依照弧度轉動角度，圓心座標為繪製出這個物件的座標軸減掉放置這個物件的容器的座標軸所得出的(x,y)。
   transform(水平縮放,水平傾斜,垂直縮放,垂直傾斜,水平移動,垂直移動);	縮放、旋轉與移動繪製物件。可以在保持物件已繪製過的樣式，再增加縮放、旋轉與移動的效果。
   setTransform(水平縮放,水平傾斜,垂直縮放,垂直傾斜,水平移動,垂直移動);	與transform一樣的效果，不同處為這個語法只會影響到在這個語法之後編寫的繪圖樣式。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/bzLbttwy/