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;
}