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

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