HTML Canvas - resetTransform() 方法

HTML Canvas resetTransform() 方法將 Canvas 2D API 中應用於 CanvasRenderingContext2D 介面上下午物件的變換方法完全重置。

語法

HTML Canvas resetTransform() 方法的語法如下 -

CanvasRenderingContext2D.resetTransform();

引數

它不接受任何引數，因為它僅將變換矩陣重置為 CanvasRenderingContext2D 介面應用的上下文物件。

返回值

當呼叫 resetTransform() 時，應用於上下文物件的當前變換矩陣將重置為單位矩陣。

示例 1

以下示例採用矩形形狀，透過修改矩陣將其旋轉，然後使用 HTML Canvas resetTransform() 方法將其重置為單位矩陣。

<!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="200" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.rotate(75 * Math.PI / 180);
         context.fillStyle = 'blue';
         context.fillRect(45, -100, 150, 100);
         context.resetTransform();
      }
   </script>
</body>
</html>

輸出

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

示例 2

以下示例採用矩形形狀，透過修改矩陣將其旋轉，然後使用 resetTransform() 方法將其重置為單位矩陣。

<!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="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.transform(1, 0, 1.7, 1, 0, 0);
         context.beginPath();
         context.fillStyle = 'gray';
         context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
         context.fill();
         context.closePath();
         context.resetTransform();
         context.beginPath();
         context.fillStyle = 'red';
         context.arc(100, 100, 50, 1 * Math.PI, 5 * Math.PI);
         context.fill();
         context.closePath();
      }
   </script>
</body>
</html>

輸出

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

html_canvas_shadows_and_transformations.htm

列印頁面

上一個

下一個