首先要获取鼠标的位置,其次变换图片的坐标到鼠标所在的位置,如果还需要实现图片的旋转效果,则需要进一步旋转图片,计算需要旋转的角度值
参考下面一段代码:
main.js
function init()
{
can=document.getElementById("canvas");
ctx=can.getContext('2d');
//检测鼠标的动向
can.addEventListener('mousemove',onMouseMove,false);//只有当鼠标移动的时候监测,触发函数onMouseMove()
}
function gameloop()//循环播放
{
window.requestAnimFrame(gameloop);//setInterval,setTimeout,frame per second
ctx1.clearRect(0,0,canWidth,canHeight);//清除上一帧
mom.draw();
}
function onMouseMove(e)
{
if(e.offSetX||e.layerX)
{
mx=e.offSetX==undefined?e.layerX:e.offSetX;//获取当前鼠标的位置
my=e.offSetY==undefined?e.layerY:e.offSetY;
}
}
mom.js
//创建一个类
var momObj=function()
{
this.x;//图片的x坐标
this.y;//图片的y坐标
this.angle;//图片与X轴的夹角
}
//初始化
momObj.prototype.init=function()
{
this.x=canWidth*0.5;
this.y=canHeight*0.5;
this.angle=0;
}
//画出图片
momObj.prototype.draw=function()
{
//lerp x,y
this.x=lerpDistance(mx,this.x,0.98); //让图片的X坐标趋向于鼠标的X坐标
this.y=lerpDistance(my,this.y,0.98);//同上
//delta angle
//Math.atan2(y,x)
var deltaY=my-this.y;//鼠标的Y坐标与图片之差
var deltaX=mx-this.x;//同上
var beta=Math.atan2(deltaY,deltaX)+Math.PI; //返回值在[0,2PI],表示图片与鼠标之间的夹角
//lerp angle
this.angle=lerpAngle(beta,this.angle,0.6);//让图片的角度随鼠标变化
ctx1.save();
ctx1.translate(this.x,this.y);//重新设置原点(this.x,this.y)
ctx1.rotate(this.angle);//旋转图片
ctx1.drawImage();
ctx1.restore();
}
commonFunction.js
//让图片不断趋向于鼠标
function lerpDistance(aim,cur,ratio) //aim是当前鼠标的x或y坐标,cur是图片的位置,ratio是百分比(调整图片与鼠标的距离,此值越大则移动越慢)
{
var delta=cur-aim; //计算鼠标与图片之间的距离
return aim+delta*ratio; //
}
//让图片的角度随鼠标变化
function lerpAngle(a,b,t)//a是图片与鼠标之间的夹角,b是图片与x轴之间的夹角,t是百分比(此值越小,则旋转越灵敏)
{
var d=b-a;
if(d>Math.PI) d=d-2*Math.PI;
if(d<-Math.PI) d=d+2*Math.PI;
return a+d*t;
}