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

打印页面