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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值