Płótno HTML metoda kwadratowaCurveTo()
Przykład
Narysuj kwadratową krzywą Béziera:
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();
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Definicja i użycie
Metoda quadraticCurveTo() dodaje punkt do bieżącej ścieżki przy użyciu określonych punktów kontrolnych, które reprezentują kwadratową krzywą Béziera.
Kwadratowa krzywa Béziera wymaga dwóch punktów. Pierwszy punkt to punkt kontrolny, który jest używany w kwadratowym obliczeniu Béziera, a drugi punkt to punkt końcowy krzywej. Punktem początkowym krzywej jest ostatni punkt na bieżącej ścieżce. Jeśli ścieżka nie istnieje, użyj metod beginPath() i moveTo() w celu zdefiniowania punktu początkowego.
Punkt startu:
przenieś do( 20,20 )
Punkt kontrolny:
kwadratowaKrzywaDo ( 20,100 , 200,20)
Punkt końcowy:
kwadratowaKrzywaDo (20,100, 200,20 )
Wskazówka: zapoznaj się z metodą bezierCurveTo() . Ma dwa punkty kontrolne zamiast jednego.
| Składnia JavaScript: | kontekst .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
Wartości parametrów
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ Odniesienie do płótna HTML