# JavaScript Animation Basics Learning Notes (i)--rotating arrows

Source: Internet
Author: User

Rotate the arrows as the mouse moves.

Requestanimationframe

Before Requestanimationframe we can use the setinterval to implement the animation loop:

function Drawframe () {       ball.x+=1;       Ball.draw (context);     }     Window.setinterval (Drawframe,1000/60)

In HTML5, the Window.requestanimationframe is added, it receives a callback function, ensures that the function is executed before redrawing, and the second parameter can specify an HTML element as the execution area of the animation. This can be called:

(function//} ());
Rotating:

The fundamental point of rotation is to find the angle of the mouse position relative to the center of the Arrow:

To find the diagonal of dy can determine the angle of rotation, and dy and dx constitute the tan, can be obtained by the inverse tangent function, JavaScript provides two of the inverse tangent function, one is Math.atan, one is math.atan2, the difference is as follows.

Atan receives a parameter, obtains the Radian, atan2 receives two parameters, respectively is to the edge y and the bottom edge x.

Then get the code:

Window.onload=function(){       varCanvas=document.getelementbyid (' Canvas '), Context=canvas.getcontext (' 2d '), Mouse=utils.capturemouse (canvas), Arrow=NewArrow (); vararrow1=NewArrow (); arrow.x=CANVAS.WIDTH/3; ARROW.Y=CANVAS.HEIGHT/2;arrow1.x=canvas.width/1.5; ARROW1.Y=CANVAS.HEIGHT/2;       (functionDrawframe () {window.requestanimationframe (Drawframe,canvas); Context.clearrect (0, 0, Canvas.width, Canvas.height)vardx=mouse.x-arrow.x; Dy=mouse.y-arrow.y; arrow.rotation = math.atan2 (DY,DX); Arrow.draw (context);vardx1=mouse.x-arrow1.x; dy1=mouse.y-arrow1.y; arrow1.rotation=-math.atan2 (DY,DX); Arrow1.draw (context);}     ()); }
CaptureMouse:
Window.utils.captureMouse =function(Element) {varMouse = {x:0, y:0, event:NULL}, Body_scrollleft=Document.body.scrollLeft, Element_scrollleft=Document.documentElement.scrollLeft, Body_scrolltop=Document.body.scrollTop, Element_scrolltop=Document.documentElement.scrollTop, Offsetleft=Element.offsetleft, OffsetTop=Element.offsettop; Element.addeventlistener (' MouseMove ',function(event) {varx, y; if(Event.pagex | |event.pagey) {x=Event.pagex; Y=Event.pagey; } Else{x= Event.clientx + Body_scrollleft +Element_scrollleft; Y= Event.clienty + Body_scrolltop +Element_scrolltop; } x-=offsetleft; Y-=OffsetTop; Mouse.x=x; Mouse.y=y; Mouse.event=event; }, false); returnMouse;};
View Code arrows:
functionArrow () { This. x = 0;  This. y = 0;  This. color = "#ffff00";  This. rotation = 0;} Arrow.prototype.draw=function(context) {context.save (); Context.translate ( This. x, This. Y); Context.rotate ( This. Rotation); Context.linewidth= 2; Context.fillstyle= This. Color;  Context.beginpath (); Context.moveto (-50,-25); Context.lineto (0,-25); Context.lineto (0,-50); Context.lineto (50, 0); Context.lineto (0, 50); Context.lineto (0, 25); Context.lineto (-50, 25); Context.lineto (-50,-25); Context.closepath ();//Complete TrajectoryContext.fill ();//FillContext.stroke ();//Draw an edgeContext.restore ();//before the canvas origin goes back to save.};
View Code

Related Keywords:
Related Article