如何在画布 2D 中绘制这个形状并用颜色填充它？答案

【问题标题】：How to draw in canvas 2D this shape and fill it with color?如何在画布 2D 中绘制这个形状并用颜色填充它？
【发布时间】：2018-11-14 13:43:03
【问题描述】：

这应该是没有这条对角线。我想绘制两个半径为 x2 的圆弧，加入它们和fill()。我知道如何计算弧的结束和开始，问题是弧总是顺时针绘制，所以要在同一 ctx.beginPath() 内绘制第二个弧，我必须使用类似 ctx.moveTo() 但 moveTo 的问题是我得到了两条不同的路径作为证明closePath() 导致这个对角线。

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

【问题讨论】：

你能分享一下你到目前为止所取得的成就吗？

标签： javascript canvas html5-canvas

【解决方案1】：

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

但是，您还需要颠倒开始和结束角度，否则弧线会尝试绕远：

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();

&lt;canvas id="c" width="200" height="200" /&gt;

【讨论】：

就是这样，只是开始和结束角度切换位置，因为它是逆时针的。谢谢！
比我的更好的解决方案 - 我正在计算弧的开始和结束，然后使用 lineTo()。

【解决方案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();

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：

创意解决方案。
ctx.closePath 函数是路径函数，在您的示例中是多余的。与ctx.lineTo 类似，它创建从最后一个路径点到前一个ctx.moveTo 或ctx.beginPath 之后的第一个点的路径段。在ctx.beginPath 调用之后，它不相关或不需要。