javascript - 如何防止路径再次被填满？

Question

我正在 Canvas 元素上绘制一些形状。第一个元素是路径，根本不应该被填充。我知道我可以将 fillStyle 设置为 none，但它会被填充两次。
这是一些示例代码(也在 jsfiddle 上):

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

function drawPoint(x,y){
    ctx.arc(x,y,12,0,Math.PI*2,false);
    ctx.fillStyle ='rgba(255, 0, 0, 0.2)';
    ctx.fill();
}

function shape(){
    ctx.fillStyle = 'rgba(0,255,0,0.2)';
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,30);
    ctx.lineTo(30,200)
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
}

shape();

drawPoint(30,12);

这只是一个示例代码，用于说明我面临的问题。 当我之后绘制形状时，该点位于背景中。所以这行不通。我还搜索了有关填充方法如何工作的资源，但找不到任何有用的内容。

那么如何绘制形状而不填充它呢？

Answer 1

只是不要调用fill()...

例如，如果您希望您的方法可重用，您可以使用标志:

function shape(fill){
    fill = fill || false;
    ctx.fillStyle = 'rgba(0,255,0,0.2)';
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,30);
    ctx.lineTo(30,200)
    ctx.closePath();
    ctx.stroke();
    if (fill) ctx.fill();
}

现在您可以调用:

draw();     /// won't fill
draw(true); /// fills

还要向此方法添加一个 beginPath() ，否则它将仅添加到第一个形状的路径(这可能就是您的意思？):

function drawPoint(x,y){
    ctx.beginPath();
    ctx.arc(x,y,12,0,Math.PI*2,false);
    ctx.fillStyle ='rgba(255, 0, 0, 0.2)';
    ctx.fill();
}

希望这有帮助(并且我没有误解你的问题)!

<强> Modified fiddle here