HTML5 Canvas 轉換

HTML5 Canvas的轉換方法，在線實例演示如何使用HTML5 Canvas進行旋轉、移動、縮放，圍繞不同點旋轉，縮放比例設置等。

您可以將轉換應用于HTML5畫布上繪制的任何內容。這是您可以應用的轉換的列表:

• 移動(移動繪制的內容)

• 旋轉

• 縮放

本文中介紹所有這些轉換

轉換矩陣

可以在2D上下文中設置轉換矩陣。此矩陣將乘以畫布上繪制的所有內容。對于本教程中使用的示例，我將其設置為“身份”矩陣，該矩陣乘以x，y坐標集后得出x，y。換句話說，不進行任何轉換。
這是將轉換矩陣設置為單位矩陣的方法:

context.setTransform(1, 0, 0, 1, 0, 0);

移動

可以將移動應用于畫布上繪制的所有內容。移動意味著所畫內容的重定位。這是您在代碼中設置移動的方式:

var x = 100;
var y =  50;
context.translate(x, y);

本示例將在畫布上繪制的所有形狀在x軸上移動100，在y軸上移動50。
注意：平移僅適用于translate()調用函數(shù)后繪制的形狀。在該函數(shù)調用之前繪制的形狀不受影響。
這是另一個示例。在相同的坐標處繪制了兩個矩形，但是在translate()調用該函數(shù)之前繪制了一個矩形，在之后繪制了一個矩形

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100, 100);

context.translate(50, 25);

context.fillStyle = "#0000ff";
context.fillRect(10,10, 100, 100);
</script>

這是在畫布上繪制時的結果:

旋轉

您可以將自動旋轉應用于在HTML5畫布上繪制的任何形狀。這是通過rotate()2D上下文上的功能完成的 。這是一個簡單的示例:

context.rotate(radians);

旋轉角度作為參數(shù)傳遞給rotate()函數(shù)。該值必須以弧度而不是度為單位。
設置旋轉后繪制的所有形狀都將繞畫布上的0,0點旋轉。這是畫布的左上角。
與平移一樣，旋轉僅應用于rotate() 調用函數(shù)后繪制的所有形狀。
這是在設置旋轉前后繪制相同矩形的示例:

<canvas id="ex2" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
 var canvas  = document.getElementById("ex2");
var context = canvas.getContext("2d");
 context.fillStyle = "#ff0000";
 context.fillRect(10,10, 100, 100);

 context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.
 context.fillStyle = "#0000ff";
 context.fillRect(10,10, 100, 100);
</script>

這是在畫布上繪制矩形時的外觀:

圍繞不同點旋轉

如前所述，所有形狀都圍繞畫布（0,0）的左上角旋轉。但是，如果您希望形狀繞不同的點旋轉怎么辦？例如，圍繞其自身的中心旋轉形狀？
要圍繞其自身的中心旋轉形狀，必須首先將畫布平移到形狀的中心，然后旋轉畫布，然后將畫布平移回0,0，然后繪制形狀。
這是一個代碼示例，它使藍色矩形圍繞其中心旋轉:

<canvas id="ex3" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex3");
var context = canvas.getContext("2d");

var x      = 10;
var y      = 10;
var width  = 100;
var height = 100
var cx     = x + 0.5 * width;
var cy     = y + 0.5 * height;

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);

context.translate(cx, cy);
context.rotate( (Math.PI / 180) * 25);  //rotate 25 degrees.
context.translate(-cx, -cy); //set center back to 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

這是在畫布上繪制時的外觀:

此示例首先將畫布的中心平移（移動）到正方形的中心（cx，cy）。然后將畫布旋轉25度。然后，它將畫布再次轉換回0,0?，F(xiàn)在，畫布圍繞cx，cy旋轉了25度。您繪制的所有內容都將圍繞cx，cy旋轉顯示。最終，該矩形被繪制為好像什么都沒發(fā)生一樣，但是現(xiàn)在它將圍繞cx，cy旋轉25度。這僅使用轉換調用即可實現(xiàn)。矩形的坐標不變。請注意context.fillRect()，繪制紅色和藍色矩形的兩個調用是如何相同的。正是它們之間的轉換調用使它們出現(xiàn)在不同的位置和旋轉位置

縮放

可以對在HTML5畫布上繪制的所有形狀應用自動縮放。
縮放時，可以通過某些因素縮放x軸和y軸上的所有坐標。您可以使用scale()函數(shù)設置這些因素，如下所示:

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

本示例將x軸和y軸上的所有坐標縮放2倍。
與translate()和一樣rotate()，縮放比例僅適用于scale()調用后繪制的形狀。
這是另一個繪制紅色和藍色矩形的代碼示例，其中縮放比例適用于藍色矩形:

<canvas id="ex5" width="500" height="250" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x      = 10;
var y      = 10;
var width  = 100;
var height = 100

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);

context.scale(2,2);

context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

這是在畫布上生成的grapichs:

請注意，藍色矩形的大小是紅色矩形的兩倍。
還要注意，從藍色矩形的左上角到畫布的左上角（0,0）的距離也兩倍。所有坐標都縮放了兩倍，矩形的左上角坐標也是如此。如果要避免在縮放時移動形狀，則必須將縮放與平移結合起來.

縮放比例

您可以使用縮放功能來實現(xiàn)比例縮放功能。下面的畫布包含4個矩形。畫布下方是一個輸入字段，可用于更改縮放級別（縮放比例）.

縮放程度:

如果看到帶有縮放級別值的文本字段，請輸入介于1到10之間的縮放級別，然后跳出文本字段以查看結果。如果看到滑塊，則只需移動滑塊即可.

平移，旋轉和縮放組合

當然可以將所有三個轉換組合在同一畫布上。但是，就像組合旋轉和平移時一樣，對2D上下文進行函數(shù)調用的順序也很重要。如果scale()在調用translate() 等之前調用，則結果看起來會有所不同。您可能需要對函數(shù)調用的順序進行一些調整才能使其正確