我知道有这样的问题，但我仍然找不到解决办法，我查看了控制台，但什么也看不到。有两张图片，一张应该出现在设置的坐标上，另一张跟随鼠标，一张本来不跟随鼠标的不显示，另一张显示。
主要.js
/**
* Created with JetBrains WebStorm.
* User: Script47
* Date: 22/09/13
* Time: 00:54
*/
function drawAvatars() {
// Create variable for the canvas & create a new object for image
var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();
// The source of the images
userImage.src = ("Images/userImage.png");
// Create an event listener then call function redrawAvatar
gameCanvas.addEventListener("mousemove", redrawAvatar);
}
function redrawAvatar(mouseEvent) {
var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();
var enemyImage = new Image();
var score = 0;
userImage.src = ("Images/userImage.png");
enemyImage.src = ("Images/enemyImage.png");
// Erase canvas sort of refresh, then re-draw image following the coordinates of the mouse in the canvas
gameCanvas.width = 400;
gameCanvas.getContext("2d").drawImage(userImage, mouseEvent.offsetX, mouseEvent.offsetY);
gameCanvas.getContext("2d").drawImage(enemyImage, 150, 150);
// Simple hit detection to see if user image hits enemy image
if (mouseEvent.offsetX > 130 && mouseEvent.offsetX < 175 && mouseEvent.offsetY > 130 && mouseEvent.offsetY < 175) {
score++;
alert("You hit the enemy!\n You score is: " +score);
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Avoid Me | Game</title>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<script src="JS/Main.js"></script>
</head>
<body>
<br/>
<center><h3>Avoid Me!</h3>
<br/>
<br/>
<canvas id="gameCanvas" height="300" width="400" onclick="drawAvatars();">
<p><strong>Notice:</strong> Browser does not support canvas!</p>
</canvas>
</center>
</body>
</html>
最佳答案
(基于您提供的链接中的代码。)
在您的 mouseMovement 函数中，您使用 mouseEvent.offsetX 和 mouseEvent.offsetY 来获取玩家的位置，但遗憾的是 Firefox 不支持这些属性。不幸的是，IIRC，唯一可以跨浏览器工作的是获取 Canvas 的位置，并将其从事件的 pageX/pageY 属性中减去。您可以使用 Canvas 的 getBoundingClientRect() 方法找到它在页面上的位置。
这是一个应该在 Firefox 中也能工作的函数版本的例子:
function mouseMovement(mouseEvent) {
var canvasPosition = gameCanvas.getBoundingClientRect();
userImageX = mouseEvent.pageX - canvasPosition.left;
userImageY = mouseEvent.pageY - canvasPosition.top;
}
关于javascript - JS 不适用于 FireFox，但适用于 Chrome 和 I.E，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18943132/