HTML Canvas - arcTo() 方法

HTML Canvas 的arcTo() 方法是CanvasRenderingContext2D 介面的一部分，可用於使用兩個控制點座標和 Canvas 元素內部的半徑，向當前路徑新增圓弧。

此方法通常用於繪製圓形路徑生成的圓角、半圓弧等。

語法

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

CanvasRenderingContext2D.arcTo(x1, y1, x2, y2, radius);

引數

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

序號	引數及描述
1	x1 第一個控制點的 x 座標。
2	y1 第一個控制點的 y 座標。
3	x2 第二個控制點的 x 座標。
4	y2 第二個控制點的 y 座標。
5	radius 要在畫布元素上繪製的圓弧的半徑。

返回值

透過獲取作為引數傳遞的控制點和半徑值，在畫布元素上繪製圓角弧。

示例

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

<!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="100" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(25, 25);
         context.arcTo(50, 50, 400, 130, 150);
         context.stroke();
         context.closePath();
      </script>
   </body>
</html>

輸出

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

示例

以下示例在 arcTo() 方法的幫助下，在 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="150" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(180, 80);
         context.arcTo(180, 140, 100, 130, 130);
         context.stroke();
      </script>
   </body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面