różne kolory wypełnienia dla łuku na płótnie

Question

Wyobrażam sobie, że rozwiązanie tego jest bardzo proste i przepraszam z góry, jeśli jest to boleśnie oczywiste, ale nie mogę wymyślić, jak ustawić dwa różne wypełnienia dla dwóch różnych łuków. .. Chcę po prostu narysować różne koła kolorów. Poniżej mam, jak normalnie robiłbym to z innymi kształtami/metodami rysowania na płótnie, ale z jakiegoś powodu z łukami ustawia on oba łuki do ostatniego 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(); 

Answer 1

Myślę, że brakuje instrukcji dotyczących ścieżki początkowej i końcowej. Spróbuj wykonać następujące czynności (to działa na mnie w jsfiddle, see here)

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

Answer 2

Zauważ, że ścieżka jest tylko geometria. Możesz ustawić .fillStyle w dowolnym momencie aż do fill().