Witajcie,
jak dokładnie obliczane są te kąty początkowe i końcowe rysowanego łuku? Zamiana stopni na radiany...o co tu chodzi? Potrzebuje szczegółowego wyjaśnienia by dobrze to zrozumieć.
ctx.arc (300, 150, 100, Math.PI/180*45, Math.PI/180*-120, true);
Math.PI/180*-120 - to tak się da w JS :P ?
2PI to 360 stopni w radianach. 1PI to 180 stopni w radianach.
Dlatego ta zależność (PI/180) przemnożona przez stopnie, daje nam radiany. Pomnóż sobie tą zależność przez 180. Wtedy 180 się redukuje, i zostaje PI rad, czyli 180 stopni w radianach. Pomnożysz przez 90 i zostaje PI/2 rad.
PI/180 to jeden stopień w radianach, dlatego pomnożony przez ilość stopni daje nam odpowiednią wartość w radianach.
Osobiście nigdy nie używałem radianów w sensie "radianów" (miałem zresztą niewiele okazji; pewnie to moje niewyedukowanie matematyczne, może jeszcze kiedyś się doedukuję). Zawsze dopasowywałem tak: 180° ≡ π (oraz pomocniczo 360° ≡ 2π; uwaga – to nie są znaki równości). Stąd wywołanie arc(100,200,50,1*Math.PI,2*Math.PI) można by zinterpretować jako "utwórz łuk [czyli fragment okręgu] 100px od lewej krawędzi kontenera, 200px od góry kontenera, o promieniu 50px, zaczynając pół okręgu w lewo i kończąc pół okręgu dalej". Pomijam opcjonalny parametr ostatni.
Mnie zawsze myliły się te ćwiartki (teraz też). Dla mnie ich kolejność powinna iść zgodnie z ruchem wskazówek zegara (w prawo), a idzie w lewo (teraz sprawdziłem – http://matematyka.pisz.pl/strona/451.html). Więc mnie ten łuk w myśli tworzy się do góry nogami w stosunku do tego, co jest renderowane przez HTML.
PS. Sprawdziłem teraz – ostatni, pominięty parametr w powyższym wywołaniu właśnie dotyczy kolejności ćwiartek. ;)
UPDATE:
Chyba pytałeś o bardziej zaawansowane obliczenia. Można by tak pomyśleć: jeśli masz utworzyć okręg, powiedzmy, "z wyciętym trójkątem równobocznym" (czyli pomniejszony o jedną szóstą) od góry, dotykający jednocześnie lewej krawędzi i górnej krawędzi kontenera, o promieniu np. 50px – to:
JavaScript ctx.arc(50, 50, 50, 0 - Math.PI/3, Math.PI + Math.PI/3);
Interpretowałbym to tak: "narysuj łuk o promieniu 50px, przylegający do lewej i górnej krawędzi kontenera, od punktu 0 (miejsce startu trzeba tutaj znać) pomniejszonego o 1/3 połowy okręgu, do punktu PI powiększonego o 1/3 połowy okręgu" (w głowie dzielę sobie okrąg na 6 równych części).
A wygląda to tak: https://jsfiddle.net/am2dcrhu/2/
Co ciekawe, zauważyłem, że w Canvas domyślnie okrąg rysowany jest jest counterclockwise – inaczej, niż w podanym przeze mnie odnośniku do strony z kolejnością ćwiartek.
Ja bym to tak liczył. Nie wiem, czy to poprawne myślenie trygonometryczne. Z tego korzystałem: https://www.w3schools.com/tags/canvas_arc.asp