Metoda Canvas bezierCurveTo()

Podręcznik Canvas

Definicja i użycie

bezierCurveTo() metoda dodaje punkt do bieżącej ścieżki za pomocą określonych punktów kontrolnych krzywej Béziera.

Wskazówka:Krzywa Béziera trzeciego stopnia wymaga trzech punktów. Pierwsze dwa to punkty kontrolne używane do obliczeń Béziera, a trzeci 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.

Trójkątna krzywa Béziera
  • Punkt początkowy: moveTo(20,20)
  • Punkt kontrolny 1: bezierCurveTo(20,100,200,100,200,20)
  • Punkt kontrolny 2: bezierCurveTo(20,100,200,100,200,20)
  • Punkt końcowy: bezierCurveTo(20,100,200,100,200,20)

Wskazówka:Zobacz Metoda quadraticCurveTo(). Ma jeden punkt kontrolny, zamiast dwóch.

Przykład

Narysuj krzywą Béziera trzeciego stopnia:

Twoja przeglądarka nie obsługuje etykiety HTML5 canvas.

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

Gramatyka

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Wartość parametru

Parametr Opis
cp1x Współrzędna x pierwszego punktu kontrolnego Béziera.
cp1y Współrzędna y pierwszego punktu kontrolnego Béziera.
cp2x Współrzędna x drugiego punktu kontrolnego Béziera.
cp2y Współrzędna y drugiego punktu kontrolnego Béziera.
x Współrzędna x końcowego punktu.
y Współrzędna y końcowego punktu.

Obsługa przeglądarki

Tabela zawiera numer wersji 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:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik Canvas