如何在画布2D中绘制此形状并用颜色填充？

Question

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

所以我想知道如何在除顺时针方向以外的其他方向上绘制圆弧或如何使用moveTo（），但仍然希望能够填充此形状。现在填充会导致以下问题： 可见白色对角线。

Answer 1

并非总是沿顺时针方向绘制弧。 sixth parameter to .arc是一个布尔值，当为true时，将使弧沿逆时针方向绘制。

但是，您还需要反转起始角度和终止角度，否则圆弧将试图走很长一段距离：

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" />

Answer 2

为什么不使用lineWidth属性使圆弧更粗。在这种情况下，您只需要打一次arc：

let canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
    
    
context.beginPath();
context.arc(20, 20, 40, 0, Math.PI / 4);
context.lineWidth = 15;
context.stroke();

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