Zielony Smok

HTML5 canvas – tutorial

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Ilustracja arcTo()

Punkt 0 jest punktem końcowym ścieżki i punktem początkowym łuku o współrzędnych (x0, y0).

Punkt 1 jest punktem formującym łuk o współrzędnych (x1, y1).

Punkt 2 jest punktem końcowym łuku i punktem początkowym ścieżki o współrzędnych (x2, y2).

Punkt 3 jest promieniem łuku.

Radius nie może być ujemny.

Jeżeli punkty 0,1 i 2 nie pokrywają się oraz jeżeli wszystkie trzy punkty nie leżą na jednej linii to łuk tworzony przez metodę jest najkrótszym łukiem obwodu koła o promieniu 3, które ma:

  • jeden punkt styczny z prostą zaczynającą się w punkcie 1 i przechodzącą przez punkt 0 biegnącą do nieskończoności
  • drugi (inny) punkt styczny z prostą zaczynającą się w punkcie 1 i przechodzącą przez punkt 2 i biegnącą do nieskończoności

W metodzie arcTo() podajemy współrzędne punktu 1 i 2 oraz wartość 3.

Metoda jest dość trudna do stosowania. Dlatego stosuje się ją przede wszystkim do zaokrąglania brzegów prostokątów. W takim przypadku:

  • odległość od 0 do 1 wynosi 3
  • odległość od 1 do 2 wynosi 3

W przypadku innych łuków czy łączenia ścieżek znacznie łatwiej (a więc i lepiej) jest użyć metody arc. Oczywiście również w opisywanym przypadku można by użyć metody arc.