momObj.prototype.init = function()
{
this.x = canWidth * 0.5;
this.y = canHeight * 0.5;
this.angle = 0;
this.bigEye.src = "./src/bigEye0.png" ;
this.bigBody.src = "./src/bigSwim0.png" ;
this.bigTail.src = "./src/bigTail0.png" ;
}
momObj.prototype.draw = function()
{
//lerp x,y
this.x = lerpDistance(mx, this.x, 0.98); //让大鱼的坐标一直趋向于鼠标的坐标
this.y = lerpDistance(my, this.y, 0.98);
//delta angle(角度差)
//Math.atan2(x,y)
var deltaY = my - this.y;
var deltaX = mx - this.x;
var beta = Math.atan2(deltaY ,deltaX);//返回值是[-PI,PI]
this.angle = lerpAngle(beta, this.angle, 0.6);
ctx1.save();
ctx1.translate(this.x,this.y); //大鱼的相对原点
ctx1.rotate(this.angle); //旋转画布
ctx1.drawImage(this.bigEye, -this.bigEye.width * 0.5, -this.bigEye.height * 0.5);
ctx1.drawImage(this.bigBody, -this.bigBody.width * 0.5, -this.bigBody.height * 0.5);
ctx1.drawImage(this.bigTail, -this.bigTail.width * 0.5 + 30, -this.bigTail.height * 0.5);
ctx1.restore();
}
什么问题?
main.js
//初始化部分
mom = new momObj();
mom.init();
mx = canWidth * 0.5;
my = canHeight * 0.5;
//循环部分
ctx1.clearRect(0,0,canWidth,canHeight); //ctx1每一帧的都要清除掉,不然会被覆盖,使画的图形变粗
mom.draw();
function onMouseMove(e)
{
if (e.offSetX || e.layerX)
{
mx = e.offSetX == undefined ? e.offSetX : e.layerX;
my = e.offSetY == undefined ? e.offSetY : e.layerY;
//console.log(mx);
}
}