Javascript 如何在html5中绘制填充的比萨饼片

我想在html5画布上画一个填充的比萨饼片。我尝试使用arc并填充它的内部，如下面的代码所示

context.fillStyle = "#FF0000";
context.beginPath();
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            0,2 * Math.PI/3-0.175, 0);
context.fill();
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            2 * Math.PI/3,4 * Math.PI/3-0.175, 0);
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            4 * Math.PI/3,2 * Math.PI-0.175, 0);
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.lineTo(node._private.position['x'] + node._private.style['width'].value + 10,
node._private.position['y']);
context.closePath();
context.stroke();

但是，它仅按预期填充如下内容：

---

我想要圆弧的上部，三角形区域也要填充。我应该为该零件添加一个填充三角形，还是有其他方法

我解决了！我应该在绘制到节点的线后填充圆弧。非常感谢

我解决了！我应该在绘制到节点的线后填充圆弧。非常感谢。当您自己找到答案时，任何未来的访客都可以从您的体验中受益。感谢您的建议：