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

來源:互聯網
上載者:User

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

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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.