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

Question

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

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

Answer 1

弧并不总是顺时针绘制。 .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(); 

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