【JavaScript動畫基礎】學習筆記（一）-- 旋轉箭頭

隨著滑鼠的移動旋轉箭頭。

requestAnimationFrame

在requestAnimationFrame之前我們可以用setInterval來實現動畫的迴圈：

  function drawFrame(){       ball.x+=1;       ball.draw(context);     }     window.setInterval(drawFrame,1000/60)

而html5中增加了window.requestAnimationFrame，它接收一個回呼函數，確保在重繪前執行該函數，第二個參數可以指定一個html元素作為動畫的執列區域。可以這樣調用：

(function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); //... }());

旋轉：

旋轉的根本在於求出滑鼠位置相對於箭頭中心座標的角度：

求出dy的對角就能確定旋轉的角度，而dy和dx構成了tan，可以通過反正切函數得到，JavaScript提供了兩個反正切函數，一個是Math.atan,一個是Math.atan2,區別如下。

atan接收一個參數，得到弧度，atan2接收兩個參數，分別是對邊y和底邊x。

於是得到代碼：

      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箭頭：

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