HTML Canvas 轉換
HTML Canvas 轉換
透過轉換，我們可以將原點移動到不同的位置、旋轉和縮放它。
轉換的六種方法是
-
translate()- 將畫布上的元素移動到網格中的新點 -
rotate()- 順時針或逆時針旋轉畫布上的元素 -
scale()- 放大或縮小畫布上的元素 -
transform()- 將當前轉換與引數描述的轉換相乘 -
resetTransform()- 將當前轉換重置為單位矩陣 -
setTransform()- 將當前轉換重置為單位矩陣，然後執行由引數描述的轉換
translate() 方法
translate() 方法用於透過 x 和 y 移動物件/元素。
translate() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| x | 水平方向的移動距離（左和右） |
| y | 垂直方向的移動距離（上和下） |
假設一個物件放置在位置 (10,10)。然後，我們使用 translate(70,70)。第二個物件也放置在位置 (10,10)，但這意味著第二個物件將放置在 x 軸位置 80 (70 + 10) 和 y 軸位置 80 (70 + 10)。
我們來看一些例子
示例
首先，在位置 (10,10) 繪製一個矩形，然後將 translate() 設定為 (70,70)（這將是新的起點）。然後，在位置 (10,10) 繪製另一個矩形。請注意，第二個矩形現在從位置 (80,80) 開始。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script>
自己動手試一試 »
示例
首先，在位置 (10,10) 繪製一個矩形，然後將 translate() 設定為 (70,70)（這將是新的起點）。然後，在位置 (10,10) 繪製另一個矩形。請注意，第二個矩形現在從位置 (80,80) (70+10, 70+10) 開始。然後將 translate() 設定為 (80,-65)（這將是新的起點）。然後，在位置 (10,10) 繪製第三個矩形。請注意，第三個矩形現在從位置 (160,15) (80+80, 80-65) 開始。請注意，每次呼叫 translate() 時，它都會在前一個起點上累加。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, -65);
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 100, 50);
</script>
自己動手試一試 »
rotate() 方法
rotate() 方法透過角度旋轉形狀。
rotate() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| angle | 旋轉角度（順時針） |
提示： 角度單位是弧度，不是角度。使用 (Math.PI/180)*degree 進行轉換。
示例
將矩形旋轉 20 度
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
</script>
自己動手試一試 »
示例
這裡我們添加了另一個矩形。兩個矩形都將被旋轉 20 度。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
ctx.strokeStyle = "blue";
ctx.strokeRect(70, 30, 100, 50);
</script>
自己動手試一試 »
scale() 方法
scale() 方法放大或縮小畫布上的元素。
scale() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| x | 水平縮放因子（寬度） |
| y | 垂直縮放因子（高度） |
畫布上的一個單位等於一個畫素。如果我們設定縮放因子為 2，一個單位就變成兩個畫素，形狀將繪製得兩倍大。如果我們設定縮放因子為 0.5，一個單位就變成 0.5 畫素，形狀將繪製得一半大小。
示例
繪製一個矩形。縮放到 200%，然後繪製一個新矩形。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 2);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
自己動手試一試 »
示例
繪製一個矩形。縮放到 50%，然後繪製一個新矩形。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(15, 15, 25, 25);
ctx.scale(0.5, 0.5);
ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 25, 25);
</script>
自己動手試一試 »
示例
繪製一個矩形。將寬度縮放到 200%，高度縮放到 300%，然後繪製一個新矩形。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 3);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
自己動手試一試 »
transform() 方法
transform() 方法將當前轉換與此方法引數描述的矩陣相乘。這允許您縮放、旋轉、平移（移動）和傾斜上下文。
transform() 方法替換變換矩陣，並將其與由以下描述的矩陣相乘：
a c e
b d f
0 0 1
transform() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| a | 水平縮放 |
| b | 水平傾斜 |
| c | 垂直傾斜 |
| d | 垂直縮放 |
| e | 水平移動 |
| f | 垂直移動 |
示例
繪製一個黃色矩形，使用 transform() 執行新的變換矩陣。繪製一個紅色矩形，執行新的變換矩陣，然後繪製一個藍色矩形。請注意，每次呼叫 transform() 時，它都會在前一個變換矩陣上累加。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
自己動手試一試 »
resetTransform() 方法
resetTransform() 方法將當前轉換重置為單位矩陣。
這等同於呼叫：ctx.setTransform(1,0,0,1,0,0)。
setTransform() 方法
setTransform() 方法將當前轉換重置為單位矩陣，然後執行由引數描述的轉換。這允許您縮放、旋轉、平移（移動）和傾斜上下文。
setTransform() 方法具有以下引數
| 引數 | 描述 |
|---|---|
| a | 水平縮放 |
| b | 水平傾斜 |
| c | 垂直傾斜 |
| d | 垂直縮放 |
| e | 水平移動 |
| f | 垂直移動 |
示例
繪製一個黃色矩形，重置並使用 setTransform() 執行新的變換矩陣。繪製一個紅色矩形，重置並執行新的變換矩陣，然後繪製一個藍色矩形。請注意，在此示例中，紅色矩形未顯示，因為它位於藍色矩形下方。
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
自己動手試一試 »
