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 " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
quadraticCurveTo() Sposób dodaje punkt do ścieżki za pomocą określonych punktach kontrolnych, które stanowią Krzywa Béziera.
Krzywej Béziera drugiego stopnia wymaga dwóch punktów. Pierwszym punktem jest punkt kontrolny, który jest używany w obliczeniach kwadratowego Beziera i 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 występuje, za pomocą beginPath() i moveTo() metody w celu określenia punktu początkowego.
Punkt startu:
moveTo( 20,20 ) Punkt kontrolny:
quadraticCurveTo( 20,100 ,200,20) Punkt końcowy:
quadraticCurveTo(20,100, 200,20 ) Tip: 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ędną x punktu kontrolnego Beziera | Graj " |
| cpy | Y współrzędnych punktu kontrolnego Beziera | Graj " |
| x | Współrzędną x punktu końcowego | Graj " |
| y | Y współrzędnych punktu końcowego | Graj " |