HTML Canvas - transform() 方法

HTML Canvas 的transform() 方法是 Canvas API 的一部分，它使用提供的方法引數將當前變換相乘。

語法

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

CanvasRenderingContext2D.transform(a, b, c, d, e, f);

引數

以下是此方法的引數列表：

序號	引數及描述
1	a 水平縮放。
2	b 垂直傾斜
3	c 水平傾斜
4	d 垂直縮放
5	e 水平平移
6	f 垂直平移

返回值

它將變換矩陣應用於 Canvas 元素內部CanvasRenderingContext2D 介面的當前上下文物件。

示例 1

下面的程式使用 HTML Canvas transform() 方法將變換矩陣應用於繪製在 Canvas 元素上的正方形。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.setTransform(0.9, 0.8, 0.7, 0.6, 0.5, 0.4);
      context.fillRect(20, 20, 100, 100);
   </script>
</body>
</html>

輸出

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

示例 2

以下示例使用 transform() 方法將變換矩陣應用於圓。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="100" height="120" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.setTransform(0.1, 0.2, 0.3, 0.4, 0.5, 0.6);
      context.arc(100, 100, 100, 0, 2 * Math.PI);
      context.fill();
   </script>
</body>
</html>

輸出

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

html_canvas_shadows_and_transformations.htm

列印頁面