Html5 canvas advanced besell curve Motion Animation (well, this article is not finished! I can't understand it! No way to add comments! Of course, I can't do anything about poor mathematics. Of course, this involves a subject called computer graphics ),

Html5 canvas advanced besell curve Motion Animation (well, this article is not finished! I can't understand it! No way to add comments! Of course, I can't do anything about poor mathematics. Of course, this involves a subject called computer graphics ),

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> // First fill in the canvas background context. fillStyle = '# eee' context. fillRect (0, 0, theCanvas. width, theCanvas. height); // border context. strokeStyle = '# eee' context. strokeRect (1, 1, theCanvas. width, theCanvas. height );

// Here, I will explain the beiser curve and click the button at the bottom of the page to create a three-time beiser curve operation instance on the Canvas! You will find that a curve is composed of four points, which are annotated below.

Var t = ball. t; var cx = 3 * (p1.x-forwarded X); var bx = 3 * (p2.x-p1.x)-cx; var ax = p3.x-forwarded X-cx-bx; var cy = 3 * (p1.y-policy); var by = 3 * (p2.y-p1.y)-cy; var ay = p3.y-policy-cy-; var xt = ax * (t * t) + bx * (t * t) + cx * t + p0.x; var yt = ay * (t * t) + by * (t * t) + cy * t + p0.y; // the xt and yt besell curve formulas here are involved in a discipline called computer graphics (there is a university, I have been on this node recently)
// 0 <= t <= 1 This is a T .... after learning graphics, you should know that, for example, the position of the starting coordinate axis of a straight line (0, 0) and the calculation slope of the DDA algorithm, the same is true. The specific formulas are still available on the Internet, my language organization is not very good either -_-//

Ball. t + = ball. speed; if (ball. t> 1) {ball. t = 1;} // draw the vertex context. font = "10px sans"; context. fillStyle = "# ff0000"; context. beginPath (); context. arc (p0.x, p0.y, 8, 0, Math. PI * 2, true); context. closePath (); context. fill (); context. fillStyle = "# fff"; context. fillText ("0", p0.x-2, p0.y + 2); // points. push ({x: xt, y: yt}); for (var I = 0; I <points. length; I ++) {context. drawImage (pointImage, points [I]. x, points [I]. y, 1, 1 );
} // Draw the image focus !!!! Image, positioningContext. DrawImage (Img,X,Y,Width,Height); That is, to draw the trajectory of the small point after that point
Context. closePath (); context. fillStyle = "#000000"; context. beginPath (); context. arc (xt, yt, 5, 0, Math. PI * 2, true); context. closePath (); context. fill ();} var p0 = {x: 60, y: 10}; // start point var p1 = {x: 70, y: 200 }; // point 1 var p2 = {x: 125, y: 295}; // point 2 var p3 = {x: 350, y: 350 }; // var ball = {x: 0, y: 0, speed :. 01, t: 0}; var points = new Array (); // the start point and the third point here. The name I obtained is more popular and should actually be called an endpoint. Because
// Although point 1 and point 2 can be deleted, but it controls the arc path, we will call it the control point theCanvas = document. getElementById ('canvas ') context = theCanvas. getContext ("2d") setInterval (drawScreen, 33 );} </script> <canvas id = "canvas" width = "800" height = "800"> your browser cannot use canvas kids shoes. Your support is my greatest pleasure !! </Canvas> </body> 

Http://files.cnblogs.com/files/LoveOrHate/canvas13.rar
 
Okay, I also noted some important points.
 
I said that I also like to set formulas for the algorithms related to besell. Let me study the formulas and you should kill me.
 
Someone just asked canvas if it could do this. Then I wrote a rough picture! This span hop is relatively large.
 
In fact, I only wrote a blog to let myself review my knowledge. After all, I didn't quite understand what I learned at the beginning! Finally, it became a bottleneck, so I will review it again! After writing this article, I have to continue to write the Basic boring work.
 
Because I have no money to buy a space for demo.
So you just need to run the code -_-//
If I ask where my salary goes, I mean the http://www.vogue.com.cn/above is very expensive! I even need to save the money. I will make a very expensive T_T girlfriend later.