Javascript和画布绘制中间有孔的圆 我想画一些像甜甜圈的东西，所以中间有个洞。我尝试使用ctx.clip（），但我意识到它将路径限制在内部，我希望它将路径限制在外部

注意事项：
此.lineWidth是“边缘”或外部部分的厚度

    ctx.beginPath();
    // this should be the hole
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
    ctx.clip();
    // this should be the outside part
    ctx.arc(this.x,this.y,this.r+this.lineWidth,0,Math.PI*2,false);
    ctx.fillStyle = "#00ff00";
    ctx.fill();

相反，我得到了一个填充圆，因为它将路径限制在较小圆弧的内部，而不是外部。是否还有另一种方法与clip（）相反？

我找到了这个解决方案：

使用以下画布节点：

<canvas id="canvas1" width="500" height="500"></canvas>

将线宽设置为所需的宽度，绘制圆，然后使用“ctx.stroke（）；”。请注意，这不允许使用颜色填充内圈。

添加提示是忽略arc（）调用末尾的ccw标志，并使用

ctx.fill（“evenodd”）填充当然可以，只需在调用stroke之前调用fill（使用该颜色）。@K3N哇，我没想到这个。[脸掌]
<canvas id="canvas1" width="500" height="500"></canvas>