Book Name: Html5-animation-with-javascript
Book Source: Https://github.com/lamberta/html5-animation
1. Using Quadraticcurveto,
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
