Przykład
Rysowanie krzywej Béziera drugiego stopnia:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); Spróbuj sam " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
quadraticCurveTo() Metoda dodaje punkt do bieżącej ścieżki za pomocą określonego punkty kontrolne, które reprezentują krzywej Béziera drugiego stopnia.
Krzywej Béziera drugiego stopnia wymaga dwóch punktów. Pierwszym punktem jest punkt kontrolny, który jest używany w obliczeniach kwadratowego Beziera, a drugi punkt jest punktem końcowym dla krzywej. Punktem wyjścia dla krzywej jest ostatni punkt w bieżącej ścieżce. Jeśli ścieżka nie istnieje, użyj beginPath() i moveTo() metod, aby określić punkt początkowy.
Punkt startu:
moveTo (20,20) Punkt kontrolny:
quadraticCurveTo (20100, 200,20) Punkt końcowy:
quadraticCurveTo (20100, 200,20) Porada: Sprawdź bezierCurveTo() metody.Ma dwa punkty kontrolno-zamiast jednego.
| Składnia JavaScript: | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| cpx | Współrzędna x punktu kontrolnego Beziera | Graj " |
| cpy | Współrzędna y punktu kontrolnego Beziera | Graj " |
| x | X-współrzędna punktu końcowego | Graj " |
| y | Y-współrzędna punktu końcowego | Graj " |