Javascript画布绘图问题

Question

所以我有一堆javascript来制作一些随机点，然后通过最小生成树连接它们。一切正常。

之后，它将点和路径绘制到画布上;它绘制了这样的图像：

- 每次随机生成。

我遇到的问题是，我希望每个圆圈都是一个带有黄色轮廓的黑色圆圈。圆圈的绘制方式如下：

context.fillStyle = "#ffff00";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i],systemsY[i]);
    context.arc(systemsX[i],systemsY[i],4,0,Math.PI*2,true);
}
context.fill();

并且工作正常，但我想绘制一个黑色圆圈，并有一个黄色的痕迹。我想这样做，因为它比停止加入点的线要比通常更早停止几个像素容易得多。

这是我的尝试：

context.fillStyle = "#000000";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i],systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}
context.fill();

context.strokeStyle = "#ffff00";
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i]+ssize,systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}
context.stroke();

但它得出了这个：

？！它重写在另一条路径上。为什么呢？！

页面的Zip：http://rapidshare.com/files/415710231/page.zip（zip文件中的html文件和css文件）。用于绘制圆圈的代码片段从第164行开始。

Answer 1

在绘制每个部分以清除路径之前，您需要调用context.beginPath()。 stroke()和fill()保留了路径，因此您在每一步都重新绘制线条。

您还可以利用粘贴的路径，并重复使用填充的黑色圆圈和轮廓的路径。它避免了代码重复，应该稍快一些。代码如下所示：

// Clear out the existing path and start a new one
context.beginPath();

// Add the circles to the newly-created path
for(var i = 0; i < syscount; i++){
    context.moveTo(systemsX[i]+ssize,systemsY[i]);
    context.arc(systemsX[i],systemsY[i],ssize,0,Math.PI*2,true);
}

// Fill them in with black
context.fillStyle = "#000000";
context.fill();

// Draw the outline with yellow
context.strokeStyle = "#ffff00";
context.stroke();