calculate points of a bezier curve code example
Example 1: what is the use of cubic bezier in html
In CSS, the cubic-bezier curve is used to control how the animation
will play throughout. The shape of the curve represents the animation play.
The curve lies on a 1 by 1 co-ordinate system.The X-axis implies the
duration(time) of the animation. The Y-axis implies the change in the
animation. The curve mainly has four points of which two points are specific.
The two points are the origin O(0,0) and the other is (1,1).
The other two points are defined by us (x1,y1) and (x2,y2).
The code goes like this--
animation-timing-function: cubic-bezier(x1,y1,x2,y2);
The co-ordinate system--
(Y-AXIS)
[CHANGE IN ANIMATION] /|\
|
| . (1,1)
|
|
|
|
|
| (X-AXIS)
/____________________________._________________________________\
\ o(0,0) | /
| [DURATION IN ANIMATION]
|
|
|
|
|
|
|
\|/
Example 2: mathematically create bezier curve javascript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();
ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);
ctx.fillStyle = 'red';
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 60, 10, 10);