bezierCurveTo - metoda obiektu CanvasCtx

Opis:

Metoda doda następny punkt ciągu wielomianowej krzywej Béziera trzeciego stopnia. Wielomianowe krzywa Béziera trzeciego stopnia wymaga trzy punkty. Pierwsze dwa punkty to punkty kontrolne, które służą do obliczeń w wielomianowej krzywej Béziera oraz ostatni punkt jest końcowy. Wyjściowym punktem dla krzywej jest ostatni określony punkt. Jeżeli punkt nie istnieje, wtedy zostanie użyta metoda beginPath() oraz moveTo() dla zdefiniowania punktu początkowego.

Składnia:

Object bezierCurveTo(Long cp1x, Long cp1y, Long cp2x, Long cp2y, Long x, Long y)

Parametry:

cp1x	(Long) Współrzędna x pierwszego punktu krzywej Béziera
cp1y	(Long) Współrzędna y pierwszego punktu krzywej Béziera
cp2x	(Long) Współrzędna x drugiego punktu krzywej Béziera
cp2y	(Long) Współrzędna y drugiego punktu krzywej Béziera
x	(Long) Współrzędna x punktu końcowego
y	(Long) Współrzędna y punktu końcowego

Notatka:

Metoda tworzy ścieżkę (path). Dlatego przed wywołaniem tej metody należałoby wołać metodę beginPath. Dla rzeczywistego rysowania ostatecznie jest wołana metoda stroke lub fill.

Patrz również:

- CanvasCtx.quadraticCurveTo (metoda)

Przykład1:

Zmienna ctx reprezentuje obszar do rysowania (CanvasCtx). Ta jest ustawiana w karcie "Draw" na początku skryptu rysującego zdarzenia onDraw następująco:

var ctx = pEvent.GetCtx(1);

JavaScriptWybierz oraz skopiuj do schowka



ctx.beginPath();

ctx.moveTo(20, 20);

ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);

ctx.stroke();

Przykład2:

JavaScriptWybierz oraz skopiuj do schowka



ctx.beginPath();

ctx.moveTo(75, 40);

ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);

ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);

ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);

ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);

ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);

ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);

ctx.stroke();