解决方法
您可以通过使用两个弧形单个路径来实现。
你顺时针画一个圆,然后沿逆时针方向画一个第二个圆。我不会进入它的细节,但是路径的构造方式知道这是为了填补这部分路径的原因。更多的细节,你可以做什么this wiki article。
如果你正在绘制一个“框架”的矩形,这一点也是一样。您可以单方向(顺时针)绘制一个方块,然后以另一种方式(逆时针)绘制内盒以获得效果。
以下是甜甜圈的代码:
var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); // Pay attention to my last argument! //ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); ctx.beginPath() ctx.arc(100,100,Math.PI*2,false); // outer (filled) ctx.arc(100,55,true); // inner (unfills it) ctx.fill();
例:
仅绘制一个“段”可以通过使路径更小(您可能需要使用beziers而不是弧)或使用剪切区域来完成。这真的取决于你想要一个“段”
这里有一个例子:http://jsfiddle.net/Hnw6a/8/
// half doughnut ctx.beginPath() ctx.arc(100,Math.PI,true); // outer (unfills it) ctx.fill();