爱博集团备用注册爱博集团备用注册


lovebet集团备用代理

【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

 

欢迎阅读本文章: 肖杰

lovebet国际官方APP

lovebet集团备用代理