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

Question

这应该没有这个对角线.我想绘制两个弧,一个半径小x2,连接它们fill().我知道如何计算弧的结束和开始,问题是弧总是顺时针绘制,所以要绘制第二个弧,ctx.beginPath()我必须使用类似ctx.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" />