it-swarm-pt.tech

cores de fillStyle diferentes para arco em tela

Imagino que a solução para isso seja muito simples e peço desculpas antecipadamente se isso for dolorosamente óbvio, mas não consigo descobrir como definir dois estilos de preenchimento diferentes para dois arcos diferentes ... Eu só quero desenhar diferentes círculos de cores. Abaixo, eu tenho como eu normalmente faria isso com outras formas/métodos de desenho na tela, mas por algum motivo com arcos, ele define os dois arcos para o último 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();
21
Nick

Acho que você está perdendo as instruções de início e fim do caminho. Tente o seguinte (ele funciona para mim no jsfiddle, veja aqui )

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

Observe que o caminho é apenas a geometria. Você pode definir .fillStyle A qualquer momento até fill( ).

1
Tim Erickson