Przykład
Narysuj krzywą Beziera:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke(); Spróbuj sam " Pomoc Browser
Internet Explorer 9, Firefox, Opera, Chrome i Safari obsługują bezierCurveTo() metody.
Uwaga: Internet Explorer 8 i wcześniejsze wersje, nie obsługuje <canvas> elementu.
Definicja i Wykorzystanie
bezierCurveTo() Metoda dodaje punkt do bieżącej ścieżki za pomocą określonego punkty kontrolne, które reprezentują krzywą Beziera.
Krzywą Beziera wymaga trzech punktów. Pierwsze dwa punkty są punkty kontrolne, które są wykorzystywane w obliczeniach sześcienną Beziera i ostatni 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.
Porada: Sprawdź quadraticCurveTo() metody.Ma jeden punkt kontrolny zamiast dwóch.
| Składnia JavaScript: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| cp1x | X-współrzędna pierwszego punktu kontrolnego Beziera | Graj " |
| cp1y | Y-współrzędna pierwszego punktu kontrolnego Beziera | Graj " |
| cp2x | X-współrzędna drugiego punktu kontrolnego Beziera | Graj " |
| cp2y | Y-współrzędna drugiego punktu kontrolnego Beziera | Graj " |
| x | X-współrzędna punktu końcowego | Graj " |
| y | Y-współrzędna punktu końcowego | Graj " |