Metoda Canvas quadraticCurveTo()
Definicja i użycie
quadraticCurveTo() Metoda do dodania punktu do bieżącej ścieżki za pomocą określonego punktu kontrolnego krzywej Béziera.
Wskazówka:Krzywa Béziera kwadratowa wymaga dwóch punktów. Pierwszy punkt to punkt kontrolny używany do obliczeń Béziera, drugi punkt to koniec krzywej. Początek krzywej to ostatni punkt w bieżącej ścieżce. 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) - Koniec punktu: quadraticCurveTo(20,100,
200,20)
Wskazówka:Zobacz również Metoda bezierCurveTo()Jest ona zbudowana z dwóch punktów kontrolnych, zamiast jednego.
Przykład
Narysuj krzywą Béziera 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 końcowego punktu. |
| y | Współrzędna y końcowego punktu. |
Wsparcie przeglądarki
Tabela zawiera numery wersji przeglądarek, które w pełni wspierają 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ługuje elementu <canvas>.
