Javascript Canvas проблема рисования

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