Płótno HTML Metoda bezierCurveTo()
Przykład
Narysuj krzywą Beziera sześcienną:
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();
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
| Method | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definicja i użycie
Metoda bezierCurveTo() dodaje punkt do bieżącej ścieżki, używając określonych punktów kontrolnych reprezentujących sześcienną krzywą Béziera.
Sześcienna krzywa Beziera wymaga trzech punktów. Pierwsze dwa punkty to punkty kontrolne używane w obliczeniach sześciennych Béziera, a ostatni 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 1
krzywa beziera do( 20, 100 , 200, 100, 200, 20)
Punkt kontrolny 2
krzywa beziera do (20, 100, 200, 100 , 200, 20)
Punkt końcowy
bezierCurveTo(20, 100, 200, 100, 200, 20 )
Wskazówka: zapoznaj się z metodą kwadratowąCurveTo() . Ma jeden punkt kontrolny zamiast dwóch.
| Składnia JavaScript: | kontekst .bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ); |
|---|
Wartości parametrów
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |