HTML学习笔记——如何让图片随鼠标移动

首先要获取鼠标的位置，其次变换图片的坐标到鼠标所在的位置，如果还需要实现图片的旋转效果，则需要进一步旋转图片，计算需要旋转的角度值

参考下面一段代码：

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;

}