HTML Canvas - getTransform() 方法

HTML Canvas 的 getTransform() 方法是 Canvas 2D API 的一部分，它獲取應用於 CanvasRenderingContext2D 介面的上下文物件的當前變換矩陣。

語法

以下是 HTML Canvas getTransform() 方法的語法：

CanvasRenderingContext2D.getTransform();

引數

它不接受任何引數，因為它只返回應用變換矩陣的物件資料。

返回值

它返回一個應用於 Canvas 元素的變換 DOMMatrix 物件。

示例

以下示例使用 HTML Canvas getTransform() 方法，在 Canvas 元素的 CanvasRenderingContext2D 介面上下文物件的視窗警報中返回變換引數。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.setTransform(1, 0.5, 0.7, 0.9, 0.8, 0);
         context.fillRect(25, 25, 150, 100);
         var trans = context.getTransform();
         alert(trans);
      }
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出如下： HTML Canvas GetTransform 方法

示例

以下示例將變換矩陣應用於 Canvas 元素內渲染的圖形，並使用 getTransform() 方法透過控制檯返回其屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="150" height="250" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.fillStyle = 'blue';
      context.setTransform(0, 0.2, 0.4, 0.6, 0.8, 1);
      context.fillRect(50, 50, 200, 200);
      var trans = context.getTransform();
      console.log(trans);
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出如下：

html_canvas_shadows_and_transformations.htm

列印頁面