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/

javascript画布不完美剪辑

1 个答案: