javascript - 如何在 canvas 2D 中绘制这个形状并用颜色填充它？

Question

这应该是没有这个对 Angular 线。我想绘制两条半径较小的 x2 圆弧，将它们连接起来并 fill()。我知道如何计算弧的终点和起点，问题是弧总是顺时针绘制的，所以要在同一个 ctx.beginPath() 中绘制第二个弧，我必须使用类似 ctx 的东西.moveTo() 但 moveTo 的问题是我得到两条不同的路径作为证明 closePath() 导致这个对 Angular 线。

所以我想知道如何在顺时针以外的其他方向绘制圆弧，或者如何使用 moveTo() 但仍然能够填充此形状。现在填充会导致以下问题: 白色对 Angular 线可见。

Answer 1

弧线并不总是顺时针绘制的。 sixth parameter to .arc是一个 bool 值，当它为真时将使弧逆时针绘制。

但是，您还需要反转起始 Angular 和结束 Angular ，否则圆弧将尝试绕远路:

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(20, 20, 40, 30 * Math.PI / 180, 80 * Math.PI / 180);
ctx.arc(20, 20, 150, 80 * Math.PI / 180, 30 * Math.PI / 180, true);
ctx.closePath();

ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#e0e0ff';
ctx.fill();

<canvas id="c" width="200" height="200" />