javascript - javascript画布不完美剪裁

Question

我正在尝试使用剪切路径的逆时针方法绘制“环形楔形”。

var cav=document.getElementById("cav");
var ct=cav.getContext("2d");

function drawWedge(r,s,e){
    ct.moveTo(250,250);
    ct.arc(250,250,r,e,s,true);
    ct.moveTo(250,250);
    ct.arc(250,250,r*0.6,s,e,false);
}
document.onmousemove=function(e){
ct.fillStyle="#ff0000";

    drawWedge(50,Math.PI/5*3,Math.PI/9*7);
    ct.fill();

}

你可以在这里看到一个小提琴：

http://jsfiddle.net/u8vjc/2/

我正在使用 Chrome。如果你仔细看，你会发现即使我对两条弧线使用相同的角度，它也不会干净地剪辑。难道我做错了什么？

Answer 1

要绘制楔形，您只需要绘制两条弧线 - 两条弧线之间的线将自动绘制：

function drawWedge(r, s, e){
    ct.beginPath();
    ct.arc(250, 250, r, e, s, true);
    ct.arc(250, 250, r * 0.6, s, e, false);
    ct.closePath();
}

您应该显式调用beginPath并且必须调用closePath以使连接第二个弧的末端的最后一条线回到第一个弧的起点。

见http://jsfiddle.net/alnitak/tEY6Z/