Javascript 和 Canvas 绘制中间有孔的圆

Question

我想画一个 donut 之类的东西，中间有一个洞的圆圈。我尝试使用 ctx.clip()，但我意识到它限制了内部路径，我希望它限制外部路径。

注意事项:
this.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() 相反？

Answer 1

我找到了这个解决方案 http://jsfiddle.net/Hnw6a/ :

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

//ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);  

ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI*2, false); // outer (filled)
ctx.arc(100,100,55,0,Math.PI*2, true); // outer (unfills it)
ctx.fill();

具有以下 Canvas 节点:

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