-1
代码说明：Car对象会根据鼠标位置定期更新其位置和方向。我是requestAnimationFrame函数，可以更平滑地渲染帧。我的程序有什么问题 - 短程序
问题： 当我在绘图函数中时，汽车对象的x和y坐标是NAN。 汽车不显示在画布上。
代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<script>
// requestAnimationFrame initialization with cross-browser compatibility
(function(){
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
// canvas and context objects
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
var ctx = myCanvas.getContext("2d");
myCanvas.addEventListener('mousemove', updateMousePos, false);
//mouse position coordinates
var mousex;
var mousey;
//constructor for a Car object with methods to update position, orientation, and draw the car
function Car(x, y, orientation, id, type) {
//x and y are the cooredinates of the center of a car object
this.x = x;
this.y = y;
this.type = type;
this.speed = 5; //default speed = 5
this.isAlive = 1;
this.stillExists = 1;
this.id = id;
this.orientation = orientation;
this.img = new Image();
this.img.source = 'car1.png';
this.img.width = 200;
this.img.height = 100;
//this method computes a new positin and orientation of our car.
this.updatePosAndOrien = function(){
//caclcuate car orientation using mousex and mousey and x y position of our car using atan2
var targetX = mousex - this.x;
var targetY = mousey - this.y;
var trgtOrien = Math.atan2(targetY, targetX);
this.orientation = trgtOrien;
//calculate new positon of car using speed and current location of car
var dx = mousex -this.x;
var dy = mousey - this.y;
//distance between mouse and car
var distance = Math.sqrt(dx*dx + dy*dy);
//Now we compute xspeed and yspeed of car - which are displacements along x and y axis
var factor = distance/this.speed;
var xspeed = dx/factor;
var yspeed = dy/factor;
//set new positon of car
this.x = this.x + xspeed;
this.y = this.y+ yspeed;
};
//draw method that draws the car on canvas
this.draw = function() {
this.img.x = this.x;
this.img.y = this.y;
this.img.orientation = this.orientation;
this.img.onload = function() {
ctx.save();//save context
//translate context origin to center of image
ctx.translate(Math.round(this.x), Math.round(this.y));
ctx.rotate(this.orientation); //rotate context
ctx.drawImage(img, -(this.width/2), -(this.height/2),
this.width, this.height);//draw img
ctx.restore(); //restore context
}
};
}
/*this function update mouse position upon mouse movement*/
function updateMousePos(evt) {
var rect = myCanvas.getBoundingClientRect();
mousex = evt.clientX - rect.left;
mousey = evt.clientY - rect.top;
//log mouse position
console.log("mouse postion: "+mousex+", "+mousey);
}
//defining car and starting the rendering
var ourCar = new Car(300, 400, 2, 111, 1);
console.log("car: "+ourCar.x+", "+ourCar.y);
/*This function draws everything using requestFrameAnimation(). */
function drawIt() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
//update orientation of player
ourCar.updatePosAndOrien();
console.log("car in drawIt: "+ourCar.x+", "+ourCar.y); //prints NAN for both
//Draw car
console.log("drawing the car");
ourCar.draw();
requestAnimationFrame(drawIt);
}
//start rendering
requestAnimationFrame(drawIt);
</script>
</body>
</html>
在'ctx.drawImage（IMG， - （this.width/2）， - （this.height/2），this.width，this.height）;'你使用未定义的'img'变量而不是'this.img'。 – Xufox
疯狂的猜测：'mousex'和'mousey'是'undefined'这将导致'NaN's遍布'updatePosAndOrien（）' – Thomas