随着鼠标的移动旋转箭头。
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：
View Code