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

如何防止路径被填满（再次）？

1 个答案: