HTML Canvas - arc() 方法

HTML Canvas 的arc() 方法是CanvasRenderingContext2D 介面的一部分，用於在 Canvas 元素的當前路徑中新增弧線。

語法

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

CanvasRenderingContext2D.arc(x, y, radius, start_angle, end_angle, anti_clockwise);

引數

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

序號	引數及描述
1	x Canvas 元素中當前可用的路徑，用於新增弧線。
2	y 應用於正在新增的路徑的變換。
3	radius 要在畫布元素上繪製的弧線的半徑。
4	start_angle 以弧度為單位測量的，從 X 軸開始的弧線角度。
5	end_angle 以弧度為單位測量的，從 Y 軸開始的弧線角度。(原文描述有誤，應是從X軸開始)
6	anti_clockwise 布林值，如果為 false，則表示順時針方向；如果為 true，則表示逆時針方向。預設值為 false。

返回值

根據傳遞的引數值，在畫布元素上繪製一個弧線。

示例

以下示例使用 HTML Canvas arc() 方法在 Canvas 元素上繪製簡單的弧線。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.arc(100, 100, 50, 0, 1.5 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.arc(250, 100, 50, 1.5 * Math.PI, 2 * Math.PI, false);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

示例

以下示例使用 arc() 方法在 Canvas 元素上繪製一個填充的圓形。

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

輸出

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

示例

以下示例使用 arc() 方法在 Canvas 元素上繪製奧迪汽車標誌。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="320" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.strokeStyle = '#8A8D8F';
         context.lineWidth = 4;
         context.arc(100, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(130, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(160, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
         context.beginPath();
         context.strokeStyle = '#8A8D8F'
         context.arc(190, 100, 25, 0, 2 * Math.PI);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面