Разные цвета fillStyle для дуги в холсте
Я предполагаю, что решение этого очень просто и извиниться заранее, если это болезненно очевидно, но я не могу понять, как установить два разных fillStyles для двух разных дуг... Я просто хочу быть способным для рисования разных цветовых кругов. Ниже у меня есть то, как я обычно делаю это с другими формами/методами рисования в холсте, но почему-то с дугами он устанавливает обе дуги в последний 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();
Ответы
Ответ 1
Я думаю, что вам не хватает инструкций начала и конца пути. Попробуйте следующее (это работает для меня в jsfiddle, см. Здесь)
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();
Ответ 2
Обратите внимание, что путь - это просто геометрия. Вы можете установить .fillStyle
в любое время до fill( )
.