HTML Canvas - 變換

我們已經學習瞭如何使用座標在畫布網格上繪製形狀。我們可以使用變換來將原點的位置轉換到不同的位置，旋轉和縮放網格。

儲存和恢復是兩種必不可少的的方法，可以幫助我們繪製複雜的圖形。每種方法的描述如下。

序號	方法和描述
1	save() 此方法用於儲存畫布元素的當前狀態。它儲存畫布的整個狀態。
2	restore() 此方法回滾最後儲存的畫布狀態。

序號

方法和描述

save()

此方法用於儲存畫布元素的當前狀態。它儲存畫布的整個狀態。

restore()

此方法回滾最後儲存的畫布狀態。

Canvas 使用堆疊來儲存對畫布元素所做的所有修改。save() 方法可以根據使用者的需要呼叫多次，並被壓入堆疊。每次呼叫 restore() 方法時，最後一個儲存的狀態都會從堆疊中彈出，並恢復到畫布中。

示例

以下示例說明了如何在畫布元素中實現 save() 和 restore()。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'orange';
            context.fillRect(40, 40, 200, 150);
            context.save();
            context.fillStyle = 'white';
            context.fillRect(55, 55, 170, 120);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(70, 70, 140, 90);
            context.restore();
            context.fillRect(85, 85, 110, 60);
            context.restore();
            context.fillRect(100, 100, 80, 30);
         }
      </script>
   </body>
</html>

輸出

以下程式碼的輸出是

平移

translate() 方法可以用來移動畫布網格的原點並在其中繪製圖形。該方法如下所示

translate(x, y) - 此方法將畫布原點和網格移動到另一個位置。“x”表示要移動的水平距離，“y”表示要移動的垂直距離。

示例

以下示例演示了 translate() 方法的功能。實現程式碼如下所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="translate();">
      <canvas id="canvas" width="500" height="400" style="border: 1px solid black;"></canvas>
      <script>
         function translate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.fillStyle = 'blue';
            context.fillRect(125, 125, 150, 100);
         }
      </script>
   </body>
</html>

輸出

上述程式碼返回的輸出是

旋轉

rotate() 方法可用於使用原點座標作為參考點將畫布元素旋轉到某個角度。該方法如下所示

rotate(angle) - 畫布元素以作為引數傳遞給 rotate() 方法的角度旋轉。要更改原點位置，可以使用 translate() 方法。角度應以弧度表示。

示例

以下示例演示了 rotate() 方法，並展示了角度變化如何影響繪製的形狀。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="rotate();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function rotate() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.fillStyle = 'green';
            context.fillRect(25, 25, 150, 100);
            context.translate(100, 100);
            context.rotate(75);
            context.fillStyle = 'blue';
            context.fillRect(25, 25, 150, 100);
         }
      </script>
   </body>
</html>

輸出

上述影像生成的形狀是

縮放和變換

變換方法縮放和變換主要用於透過改變畫布的單位和變換位置來改變畫布元素網格。這些方法如下所示。

scale(x, y) - scale 方法用於增加或減小畫布網格的大小。預設情況下，畫布元素的一個單位正好是一個畫素。scale 方法採用所有浮點值，小於 1.0 的值減小單位大小，大於 1.0 的值增加畫布的單位大小，用於縮放網格。

縮放示例

以下示例縮放畫布網格並使用可用函式繪製文字。實現程式碼如下所示

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="scale();">
      <canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
      <script>
         function scale() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.scale(1.5, 3.0);
            context.font = '50px Verdana';
            context.fillText('TutorialsPoint', 10, 50);
         }
      </script>
   </body>
</html>

輸出

以下程式碼返回的畫布文字為

變換方法可用於直接修改變換矩陣。可用於實現變換的方法如下所示。

transform(a, b, c, d, e, f) - 此方法將當前矩陣與變換矩陣相乘。涉及的引數為：

a - 水平縮放
b - 水平傾斜
c - 垂直傾斜
d - 垂直縮放
e - 水平移動
f - 垂直移動

setTransform(a, b, c, d, e, f) 方法：它將當前變換重置為單位矩陣，並呼叫 transform() 方法使用引數設定指定的變換。

resetTransform() 方法 - 它將當前矩陣更改為單位矩陣。

變換示例

以下程式碼在文字上實現了變換方法。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Transforming </title>
   </head>
   <body onload="transform();">
      <canvas id="canvas" width="300" height="350" style="border: 1px solid black;"></canvas>
      <script>
         function transform() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
            context.transform(0.5, 1.0, 1.5, 1.0, 0.5, 0);
            context.font = '40px Verdana';
            context.strokeText('Transform', 50, 50);
         }
      </script>
   </body>
</html>

輸出

上述程式碼的輸出是

列印頁面