Rysunek różne kolorowe kształty w ścieżce (HTML5 Canvas/JavaScript)

Question

Próbuję narysować wiele łuków koła wypełnione różnymi kolorami

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

ta produkuje oba łuki wypełnionym czerwonym, i mogę powiedzieć, że wokół mniejszego jest słaby czarny kontur.

Czy ktoś może rzucić nieco światła na to w jaki sposób można to osiągnąć? co robię źle?

Answer 1

Zamknij ścieżkę, a następnie otwórz ją ponownie.

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

jsFiddle.

... pomiędzy kodem do rysowania łuku.

Answer 2

Ścieżka rozpoczyna się i kończy beginPath endPath. Każda rzecz pomiędzy jest tą samą ścieżką. Możesz nawet narysować ścieżki z dziurami za pomocą reguł skrzydeł. Narysuj coś w jednym kierunku i coś innego w przeciwnym kierunku, ale w pierwszej kolejności. Narysujmy prostokąt z otworem w środku za pomocą linii. 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(); fill();

można to zrobić z dowolnego kształtu Spróbuj łuk. w jednym kierunku, a następnie w przeciwnym kierunku, używając mniejszego promienia