Disegno diverse forme colorate in un percorso (HTML5 Canvas/Javascript)

Question

sto cercando di disegnare più archi di cerchio riempiti con diversi colori

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath(); 

Questo produce entrambi gli archi riempiti con il rosso, e posso dire che c'è un debole contorno nero attorno a quello più piccolo.

Qualcuno può fare luce su come posso fare questo? cosa sto facendo di sbagliato?

Answer 1

Chiudere il percorso e quindi riaprirlo.

ctx.closePath(); 
ctx.beginPath(); 

jsFiddle.

... tra il codice di disegno dell'arco.

Answer 2

Un percorso inizia con BeginPath e termina con endPath. Ogni cosa in mezzo è la stessa strada. Puoi persino tracciare percorsi con buchi usando le regole alate. Disegna qualcosa in una direzione e qualcos'altro nella direzione opposta, ma all'interno della prima cosa. Disegniamo un rettangolo con un buco nel mezzo usando le linee. beginPath(); moveTo (10,10); lineTo (100,10); lineTo ((100,60); lineTo (10,60); lineTo (10,10); closePath(); moveTo (20,20); lineTo (20,50); lineTo (90 , 50); lineTo (90,20); lineTo (20,20); closePath(); endPath(); di riempimento();

Si potrebbe fare questo con qualsiasi forma Prova un arco. in una direzione poi un'altra nella direzione opposta utilizzando un raggio più piccolo