我們在使用 Canvas 繪制圖形時，可能會想對繪制的圖形進行變換，例如讓圖形旋轉90度，或者讓圖像縮小放大等，這些效果都可以通過 Canvas API 的坐標軸變換處理功能來實現。

圖形旋轉

如果我們要想將圖形進行旋轉，例如下面這張圖片：

可以通過 rotate() 方法來實現這個效果，rotate() 方法用于旋轉當前的繪圖，帶有一個參數 angle，表示旋轉角度。旋轉的中心點是坐標的原點，是以順時針方向進行旋轉，如果想要以逆時針方向來旋轉，可以將參數設置為負數。

示例：

例如上圖的實現代碼如下所示：

HTML5學習(9xkd.com)

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.fillStyle = "pink"; // 填充顏色

ctx.rotate(20*Math.PI/180);

ctx.fillRect(50, 30, 100, 50);

圖形縮放

圖形縮放可以使用 scale() 方法來實現，可以對圖形進行放大或縮小設置。注意，這個函數有兩個參數，第一個參數為水平方向的縮放倍數，第二個參數為垂直方向的縮放倍數。要將圖形縮小，可以將參數值設置為0到1之間的小數，例如 0.5 表示將圖形縮小一倍。或者也可以將參數值設置為百分數，例如 0.5=50%、1 = 100%、2=200% 等。

示例：

將圖形放大一倍：

HTML5學習(9xkd.com)

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.fillStyle = "pink"; // 填充顏色

ctx.fillRect(50, 30, 100, 50);

ctx.scale(1.5, 1.5);

ctx.fillRect(50, 30, 100, 50);

在瀏覽器中的預覽效果：

圖形平移

移動圖形可以通過 translate() 方法來實現，這個方法中的第一個參數表示將坐標軸向右邊移動若干個單位，第二個參數表示將坐標軸圓點向下移動若干個單位。

示例：

將圖形水平移動50px，向下移動50px：

HTML5學習(9xkd.com)

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.fillStyle = "pink"; // 填充顏色

ctx.fillRect(50, 30, 100, 50);

ctx.translate(50, 50);

ctx.fillRect(50, 30, 100, 50);

在瀏覽器中的預覽效果：

小練習

我們通過上述學習的三個方法，來實現下圖所示效果：

實現代碼如下所示：

HTML5學習(9xkd.com)

window.onload = function() {

var can = document.getElementById("mycanvas");

var ctx = can.getContext("2d");

ctx.translate(200, 10);

ctx.fillStyle = "rgba(219,112,147, 0.7)";

for(var i = 0; i < 50; i++){

ctx.translate(27, 27);

ctx.scale(0.95, 0.95);

ctx.rotate(Math.PI / 10);

ctx.fillRect(0, 0, 90, 50);

}

}

總結

我們在繪制圖形的時候，經常會用到上述幾個方法來進行圖形變化，需要注意的是，這個變化的不是畫布，而是畫布上的畫進行變化。

總結

以上是生活随笔為你收集整理的html5 canvas获取坐标系,HTML5 Canvas坐标变换的全部內容，希望文章能夠幫你解決所遇到的問題。

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