Metoda HTML canvas quadraticCurveTo()
Definicja i użycie
quadraticCurveTo() metody do dodania punktu do bieżącej ścieżki za pomocą określonego punktu kontrolnego krzywej kwadratowej.
Wskazówka:Krzywa kwadratowa wymaga dwóch punktów. Pierwszy punkt to punkt kontrolny używany do obliczeń krzywej kwadratowej, drugi punkt to punkt końcowy krzywej. Początek krzywej to ostatni punkt ścieżki. Jeśli ścieżka nie istnieje, użyj beginPath() i moveTo() metoda do zdefiniowania punktu początkowego.
- Punkt początkowy: moveTo(
20,20) - Punkt kontrolny: quadraticCurveTo(
20,100,200,20) - Punkt końcowy: quadraticCurveTo(20,100,
200,20)
Wskazówka:Zobacz Metoda bezierCurveTo()。Ma dwa punkty kontrolne zamiast jednego.
Przykład
Narysuj krzywą kwadratową:
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();
Gramatyka
context.quadraticCurveTo(cpx,cpy,x,y);
Wartość parametru
| Parametry | Opis |
|---|---|
| cpx | Współrzędna x punktu kontrolnego Bezier. |
| cpy | Współrzędna y punktu kontrolnego Bezier. |
| x | Współrzędna x punktu końcowego. |
| y | Współrzędna y punktu końcowego. |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komentarz:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
