Javascript Problème de dessin de canevas

Question

J'ai donc un tas de javascript pour faire des points aléatoires, puis je les connecte via un arbre recouvrant minimum. Tout fonctionne bien.

Ensuite, il dessine les points et les chemins sur la toile; et il dessine une image comme ceci:

- chaque fois généré de façon aléatoire.

Le problème que j'ai avec ceci, c'est que j'aimerais que chacun des cercles soit un cercle noir avec un contour jaune. Les cercles sont dessinés comme ceci:

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

et qui fonctionne très bien, mais je veux dessiner un cercle noir, et une trace jaune. Je veux le faire de cette façon, car il est beaucoup plus facile que d'arrêter les lignes qui joignent les points s'arrêter quelques pixels plus tôt que normalement.

Ce fut ma tentative:

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

mais il tire ceci:

!! Il retrace l'autre chemin. Pourquoi?!

Zip de la page: http://rapidshare.com/files/415710231/page.zip (fichier html et un fichier css dans le zip). L'extrait de code pour dessiner les cercles commence à la ligne 164.

Answer 1

Vous devez appeler context.beginPath() avant de dessiner chaque partie pour effacer le chemin. stroke() et fill() laissez le chemin en place, de sorte que vous redessinez les lignes à chaque étape.

Vous pouvez également tirer parti du chemin qui reste et réutiliser le chemin pour les cercles noirs remplis et le contour. Il évite la duplication de code et devrait être légèrement plus rapide. Le code ressemblerait à ceci:

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