javascript画布不完美剪裁

我试图用逆时针的方法画一个“环楔”来裁剪路径

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();

}

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

---

我用的是Chrome。如果你仔细观察，你会发现，即使我对两条弧使用相同的角度，它也不会剪裁干净。我做错什么了吗？

要画一个楔子，你只需要画两个圆弧-两个圆弧之间的直线将自动绘制：

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

，以获得连接第二条弧的端点和第一条弧的起点的最后一条线

---

请参见

它看起来几乎有边框或笔划。有一个边框类型的属性可以处理吗？看起来不像，看看这个：所以当你移动鼠标时，不完美的剪裁会随着时间的推移逐渐消失，这可能是一个舍入错误。@XunYang请看我的答案-解决方案很简单。谢谢！刚刚意识到我根本不需要使用剪辑。。。无论如何，要使两个基于浮点的形状完全匹配是不可能的