Two Point Cubic Bezier Curve
Draw a cubic bezier curve between two points. The curve is defined by the points (x1,y1) and (x2,y2) as anchor points and the points (xc1,yc1) and (xc2,yc2) as corresponding control points.
Approximately speaking, control points "pull" the curve towards them.
You can change all the basic properties like fill and stroke.
Syntax
new twoPointCubicBezier(x1, y1, xc1, yc1, x2, y2, xc2, yc2, fill, fill_opacity, stroke, stroke_width);
Parameters
| x1 | Number : x-coordinate of the starting point |
| y1 | Number : y-coordinate of the starting point |
| xc1 | Number : x-coordinate of the first control point |
| yc1 | Number : y-coordinate of the first control point |
| x2 | Number : x-coordinate of the ending point |
| y2 | Number : y-coordinate of the ending point |
| xc2 | Number : x-coordinate of the second control point |
| yc2 | Number : y-coordinate of the second control point |
| fill | Color : fill color of the curve |
| fill_opacity | Number [0 to 1] or percentage: fill opacity of the curve |
| stroke | Color : stroke color of the curve |
| stroke_width | Number : stroke width of the curve |
Example
new twoPointCubicBezier(100,HEIGHT/2, 150, HEIGHT/4,300,HEIGHT/2,250,3*HEIGHT/4, "#695fe6", 0, "#695fe6", 2);
new line(100,HEIGHT/2, 150, HEIGHT/4, "#F5C7F7", 1, "round",'10 10');
new line(300,HEIGHT/2, 250, 3*HEIGHT/4, "#F5C7F7", 1, "square",'10 10');
new point(100,HEIGHT/2, "#695fe6", 4);
new point(150,HEIGHT/4, "#F5C7F7", 4);
new point(250,3*HEIGHT/4, "#F5C7F7", 4);
new point(300,HEIGHT/2, "#695fe6", 4);
t=0;
function draw(){
clearCanvas();
new twoPointCubicBezier(100,HEIGHT/2, 150, HEIGHT/4-t,300,HEIGHT/2,250,3*HEIGHT/4+t, "#695fe6", 0, "#695fe6", 2);
new line(100,HEIGHT/2, 150, HEIGHT/4-t, "#F5C7F7", 1, "round",'10 10');
new line(300,HEIGHT/2, 250, 3*HEIGHT/4+t, "#F5C7F7", 1, "square",'10 10');
new point(100,HEIGHT/2, "#695fe6", 4);
new point(150,HEIGHT/4-t, "#F5C7F7", 4);
new point(250,3*HEIGHT/4+t, "#F5C7F7", 4);
new point(300,HEIGHT/2, "#695fe6", 4);
if(t>=HEIGHT/4){
t=-HEIGHT/4;
}
t+=0.1;
requestAnimationFrame(draw);
}