坐標變換
案例1：
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.translate(200,50);
cxt.fillStyle='rgba(255,0,0,0.25)';
for(var i=0;i<40;i++)
{
cxt.translate(25,25);
cxt.scale(0.9,0.9);
cxt.rotate(Math.PI/10);
cxt.fillRect(0,0,100,50);
}
}
您的瀏覽器不支持
效果圖：
注釋：
(1)平移
cxt.translate( x , y );
translate方法使用兩個參數，x表示將坐標軸原點向左移動多少個單位，默認情況下為像素，y表示將坐標軸原點向下移動多少個單位。
(2)擴大
cxt.scale( x , y );
scale方法使用兩個參數，x是水平方向的放大倍數，y是垂直方向的放大倍數；將圖形縮小的時候，將這兩個參數設為0到1之間的小數就可以了，譬如0.5是指將圖形縮小一半。
(3)旋轉
cxt.rotate(angle);
rotate方法接受一個參數angle，angle是指旋轉的角度，旋轉的中心點是坐標軸的原點。旋轉是以順時針方向進行的，要想逆時針旋轉時，將angle設定為負數就可以了。
案例2
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fillStyle="#eeeeff";
cxt.fillRect(0,0,400,320);
cxt.translate(60,60);
for( var i=0;i<6;i++)
{
cxt.translate(50,50);
cxt.scale(0.8,0.8);
cxt.rotate(Math.PI/10);
createStar(cxt);
cxt.fill();
}
function createStar(cxt){
var n=0;
var dx=0;
var dy=0;
var s=50;
cxt.beginPath();
cxt.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
cxt.lineTo(dx+x*s,dy+y*s);
}
cxt.closePath();
}
}
您的瀏覽器不支持
效果圖：
注釋：
(1)如果要對矩形進行變形，使用坐標變換就足夠了。
(2)createStar函數中，只創建了一個五角星，因坐標軸變換，在Canvas畫布中，此五角星會一邊縮小一邊旋轉，之后產生一個新的五角星，新的五角星又采用同樣的方法進行繪制，最終繪制出一串變形效果的五角星。
