正文
【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;
};
箭头：
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之前
};
