Book Name: Html5-animation-with-javascript
Book Source: Https://github.com/lamberta/html5-animation
1. Using Quadraticcurveto,
- Starting point: MoveTo (a)
- Control point:The first two parameters of Quadraticcurveto (100,200,20),
- End point:The latter two parameters of Quadraticcurveto (20,100, 20)
This is illustrated below:
2. The point at which the curve passes
If you want the curve to pass through a point, you can use the formula below to calculate it. Where Xt,yt is the target point we want the curve to pass through, and the x0,y0,x2,y2 is two endpoints respectively. With this formula you can calculate the control point x1,y1
X1 = XT * 2-(x0 + x2)/2;
Y1 = YT * 2-(y0 + y2)/2;
03-curve-through-point.html Code:
<!doctype html>Example from<a href= "http://amzn.com/1430236655?tag=html5anim-20" ><em>foundation HTML5 Animation withjavascript</em></a> window.onload=function () { varCanvas = document.getElementById (' Canvas '), Context= Canvas.getcontext (' 2d '), Mouse=utils.capturemouse (canvas), x0= 100, y0= 200, X2= 300, y2= 200; Canvas.addeventlistener (' MouseMove ',function() {Context.clearrect (0, 0, Canvas.width, canvas.height); varX1 = mouse.x * 2-(x0 + x2)/2, y1= Mouse.y * 2-(y0 + y2)/2; //curve through MouseContext.beginpath (); Context.moveto (x0, y0); Context.quadraticcurveto (x1, y1, x2, y2); Context.stroke (); }, false); }; </script> </body>View Code3. Multiple curves
Animation principle--curve