html5學習筆記三：canvas中平移，縮放，旋轉等影象變換問題
1，儲存與恢復問題
關鍵字：save / restore
save指儲存save之前的canvas狀態，restore恢復save儲存的canvas狀態。舉個例子我想在canvas中隔一秒顯示一個圖片，那我可以先用save指令儲存空白的canvas，然後在顯示一張圖片之後restore到空白的canvas狀態，再顯示下一張。
還有一個典型的程式碼如下，大家可以思考一下為什麼要用我save和restore。註釋掉save和restore之後效果為什麼是上圖而不是下圖。
<!DOCTYPE HTML> <html> <head> <script language="javascript"> function drawTop(ctx, fillStyle){ ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0, 0, 30, 0,Math.PI,true); ctx.closePath(); ctx.fill(); } function draw(){ var ctx = document.getElementById('myCanvas').getContext("2d"); // 注意：所有的移動都是基於這一上下文。 ctx.translate(80,80); for (var i=1;i<10;i++){ <!--ctx.save();--> ctx.translate(60*i, 0); drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)"); <!--ctx.restore();--> } } window.onload=function(){ draw(); } </script> </head> <body> <canvas id="myCanvas" width="700" height="300"></canvas> </body> </html>
2，移動座標空間
key word：translate（x，y）
x表示沿x軸座標遷移量，y是沿著y軸遷移量，座標原點是（0,0）遷移之後是（x，y）
3，矩陣變換
key word :transform(m11,m12,m21,m22,dx,dy);
矩陣變換用於對原影象進行修改， 可以實現旋轉，平移，縮放等操作
A=
|
m11 |
m21 |
dx |
|
m12 |
m22 |
dy |
|
0 |
0 |
1 |
|
X’ |
|
Y’ |
|
1 |
|
X |
|
Y |
|
1 |
B=A*C=
|
(m11)X+(m21)Y+dX |
|
(m12)X+(m22)Y+dy |
|
1 |
實現旋轉的話：transform（cosβ，sinβ，-sinβ，cosβ，0,0）
移動：eg transform（0,1,1,0，0，0）
縮放：transform（0,0.95,0.95,0,0,0）
3，縮放和旋轉
keyword：scale ；rotate
scale（x，y） x：橫座標縮放係數 y：縱座標縮放係數
rotate（β） 正值表示順時針
<!DOCTYPE HTML> <html> <head> <script language="javascript"> function draw(){ var ctx = document.getElementById('myCanvas').getContext("2d"); ctx.translate(200,20); for (var i=1;i<80;i++){ ctx.save(); ctx.translate(30,30); ctx.scale(0.95,0.95); ctx.rotate(Math.PI/12); ctx.beginPath(); ctx.fillStyle="red"; ctx.globalAlpha="0.4"; ctx.arc(0,0,50,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } } window.onload=function(){ draw(); } </script> </head> <body> <canvas id="myCanvas" width="700" height="300"></canvas> </body> </html>
4，影象的組合
keyword：globalCompositOperation="x"
x可以是source-ove，destination-over，source-atop，destination-atop，source-in，destination-in，source-out，destination-out，lighter，darker表示各種效果
兩個影象有重疊區域時可以用這個操作，下面程式碼可以執行檢視效果。
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.fillRect(50,25,100,100);
context.fillStyle="green";
context.globalCompositeOperation="source-over";
context.globalAlpha=0.5;
context.beginPath();
context.arc(150,125,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>
</body>
</html>
