坐標變換

案例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畫布中，此五角星會一邊縮小一邊旋轉，之后產生一個新的五角星，新的五角星又采用同樣的方法進行繪制，最終繪制出一串變形效果的五角星。

總結

以上是生活随笔為你收集整理的html5 窗口变形,HTML5画布（变形）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。