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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: