web-dev-qa-db-fra.com

différentes couleurs fillStyle pour l'arc dans la toile

J'imagine que la solution à cela est très simple, et je m'excuse à l'avance si cela est douloureusement évident, mais je n'arrive pas à comprendre comment définir deux fillStyles différents pour deux arcs différents ... Je veux juste pouvoir dessiner différents cercles de couleur. Ci-dessous, j'ai comment je le ferais normalement avec d'autres formes/méthodes de dessin dans le canevas, mais pour une raison quelconque avec les arcs, il définit les deux arcs sur le dernier fillStyle.

ctx.fillStyle = "#c82124"; //red
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.fill();

ctx.fillStyle = "#3370d4"; //blue
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.fill();
javascriptcanvascolorsfillgeometric-arc
21
Nick

Je pense que vous manquez les instructions de chemin de début et de fin. Essayez ce qui suit (cela fonctionne pour moi dans jsfiddle, voir ici )

ctx.fillStyle = "#c82124"; //red
ctx.beginPath();
ctx.arc(15,15,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#3370d4"; //blue
ctx.beginPath();
ctx.arc(580,15,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
39
puk

Notez que le chemin n'est que la géométrie. Vous pouvez définir .fillStyle À tout moment jusqu'à la fill( ).

1
Tim Erickson