bezierCurveTo - method of the CanvasCtx object
Description:
The method adds additional point to the current cubic Bézier curve path. The cubic bezier curve requires three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point of the curve. The starting point of the curve is the last point in the current path. If the point does not exist, then the
beginPath() and
moveTo() methods are used to define a starting point.
Syntax:
Object bezierCurveTo(Long cp1x, Long cp1y, Long cp2x, Long cp2y, Long x, Long y)
Parameters:
| cp1x | (Long) The x-coordinate of the first Bézier curve control point |
|---|
| cp1y | (Long) The y-coordinate of the first Bézier curve control point |
|---|
| cp2x | (Long) The x-coordinate of the second Bézier curve control point |
|---|
| cp2y | (Long) The y-coordinate of the second Bézier curve control point |
|---|
| x | (Long) The x-coordinate of the ending point |
|---|
| y | (Long) The y-coordinate of the ending point |
|---|
Note:
The method creates a path. Therefore before calling this method the
beginPath method should be called. For the rendering itself the
stroke or
fill method is used.
Example1:
The
ctx variable represents the drawing canvas (
CanvasCtx). The setup is done on the "
Draw" tab at the beginning of the script of drawing event
onDraw as follows:
var ctx =
pEvent.
GetCtx(1);
JavaScriptSelect and copy to clipboard
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();Example2:
JavaScriptSelect and copy to clipboard
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();