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 drawFrame(){
 window.requestAnimationFrame(drawFrame,canvas); //...   }());
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(){
       var canvas=document.getElementById('canvas'),
       context=canvas.getContext('2d'),
       mouse=utils.captureMouse(canvas),
       arrow=new Arrow();
       var arrow1=new Arrow();

       arrow.x=canvas.width/3;
       arrow.y=canvas.height/2;
       

       arrow1.x=canvas.width/1.5;
       arrow1.y=canvas.height/2;
       

(function drawFrame(){
 window.requestAnimationFrame(drawFrame,canvas);
 context.clearRect(0, 0, canvas.width, canvas.height)
 var dx=mouse.x-arrow.x; 
 dy=mouse.y-arrow.y;
 arrow.rotation=Math.atan2(dy,dx);
 arrow.draw(context);

 var dx1=mouse.x-arrow1.x;
 dy1=mouse.y-arrow1.y;
 arrow1.rotation=-Math.atan2(dy,dx);
 arrow1.draw(context);

}());

     }
CaptureMouse:
window.utils.captureMouse = function (element) {
  var mouse = {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) {
    var x, 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);
  
  return mouse;
};
View Code arrows:
function Arrow () {
  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();//完成轨迹
  context.fill();//填充
  context.stroke();//画出边线
  
   context.restore();//使得canvas原点回到save之前
}; 
View Code




Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.