HTML | 画布 arc() 方法

简介

HTML 的画布（Canvas）提供了一系列的绘制函数，其中之一就是 arc() 方法。该方法可以在画布上绘制一个圆形或部分圆弧。arc() 方法的语法如下：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

• x 和 y 指定圆心的坐标；
• radius 指定圆的半径；
• startAngle 和 endAngle 指定绘制的起始角度和结束角度，单位为弧度值；
• anticlockwise 指定绘制方向，为 true 时逆时针绘制，否则按顺时针方向绘制。

示例

以下代码片段演示如何使用 arc() 方法在画布上绘制圆形和部分圆弧：

<canvas id="myCanvas"></canvas>

<script>
  // 获取画布对象
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // 绘制部分圆弧
  ctx.beginPath();
  ctx.arc(100, 75, 50, Math.PI / 2, Math.PI * 3 / 2);
  ctx.fillStyle = "#FF0000";
  ctx.fill();
</script>

效果如下：

注意，每一次使用 arc() 方法前，需要先调用 beginPath() 方法，用于开始一个新的绘制路径，并清空之前的路径。

总结

arc() 方法是 HTML 画布绘制函数中的一种，可以用于绘制圆形和部分圆弧等。该方法的参数均为数值类型，需要注意弧度制与角度制的转换。在使用 arc() 方法前要先调用 beginPath() 方法清空之前的路径。