HTML Canvas - rotate() 方法

HTML Canvas rotate() 方法將可用圖形旋轉到變換矩陣中用作特定角度的上下文物件。

語法

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

CanvasRenderingContext2D.rotate(angle);

引數

以下是該方法使用的引數：

序號	引數和說明
1	角度將上下文物件旋轉到的角度（以弧度為單位）。

返回值

它返回一個 CanvasRenderingContext2D 物件使用的旋轉變換物件。

示例

以下示例取在 Canvas 上繪製的一條線，並將其旋轉到作為引數傳遞給 HTML Canvas rotate() 方法的特定角度。

<!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.beginPath();
      context.moveTo(25, 25);
      context.lineTo(150, 25);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.rotate(18 * Math.PI / 180);
      context.moveTo(100, 100);
      context.lineTo(225, 100);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

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

示例

以下示例使用 rotate() 方法旋轉在 Canvas 元素上繪製的正方形。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="450" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.strokeRect(25, 20, 150, 100);
      context.rotate(50 * Math.PI / 180);
      context.strokeRect(250, 10, 150, 100);
   </script>
</body>
</html>

輸出

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

html_canvas_shadows_and_transformations.htm

列印頁面