Проблема с рисованием холста

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

но он рисует это:

!! Он перерисовывается по другому пути. Зачем?!

Почтовый индекс: http://rapidshare.com/files/415710231/page.zip (html-файл и файл css внутри zip-файла). Фрагмент кода для рисования кругов начинается с строки 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();