canvas API - 填充圆圈没有按预期工作

Question

我正在使用 canvas API，但是在使用 CanvasRenderingContext2D.arc(x,y,radius,startAngle,endAngle,couterclockwise) 时，它在 documentation 中提到它采用以下参数：

x：圆弧中心的水平坐标。

y：圆弧中心的垂直坐标。

radius：圆弧的半径。必须是积极的。

startAngle：圆弧开始的角度，以弧度为单位，从正 x 轴开始测量。

endAngle：圆弧结束的角度，以弧度为单位，从正 x 轴开始测量。

counterclockwise 可选：一个可选的布尔值。如果为真，则在起始角和结束角之间逆时针绘制圆弧。默认为 false（顺时针方向）

我发现，例如，当我将 startAngle 设置为 0 和 endAngle 1.5*MathPI 并填充圆时，它会给出一个线段，而不是我预期的 3/4 圆。我正在尝试找到一种方法来使用它来制作电路的一部分而不是一段但没有希望。

这是代码

const canvas = document.querySelector('.canvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 3 / 2, false);
ctx.fillStyle = 'red';
ctx.fill();

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

<canvas class="canvas"></canvas>

输出

我期望输出是从 0 到 3/2*PI 的 3/4 圆。 我只想知道如何使用 canvas API 来制作我预期的输出。

Answer 1

发生的事情是使用时

ctx.arc(200, 200, 50, 0, Math.PI * 3/2, false);

顾名思义，这将在两点之间创建一条弧线 (ctx.arc)，当我们填充形状时：它将连接起始角度点和结束角度点。并填充这个形状。

要制作一个 3/2 的圆，我们需要从 endAngle 到中心画一条线，然后关闭到起始角的路径。

我们可以这样做：

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 3/2, false);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

这将有一个 3/4 的圆，如下所示。

const canvas = document.querySelector('.canvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 3 / 2, true);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

<canvas class="canvas"></canvas>