Javascript JS不适用于FireFox，但适用于Chrome&；即_Javascript_Css_Html

Javascript JS不适用于FireFox，但适用于Chrome&；即

javascript css html

Javascript JS不适用于FireFox，但适用于Chrome&；即,javascript,css,html,Javascript,Css,Html,我知道有这样的问题，但我仍然找不到解决办法，我通过控制台看了看，什么也看不到。有两个图像，一个显示在设定的坐标上，另一个跟随鼠标，一个不跟随鼠标，但另一个显示 Main.js /** * Created with JetBrains WebStorm. * User: Script47 * Date: 22/09/13 * Time: 00:54 */ function drawAvatars() { // Create variable for the canvas & creat

我知道有这样的问题，但我仍然找不到解决办法，我通过控制台看了看，什么也看不到。有两个图像，一个显示在设定的坐标上，另一个跟随鼠标，一个不跟随鼠标，但另一个显示

Main.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);
}
}

/**
*用JetBrains WebStorm创建。
*用户：Script47
*日期：2013年9月22日
*时间：00:54
*/
函数drawravatars（）{
//为画布创建变量&为图像创建新对象
var gameCanvas=document.getElementById（“gameCanvas”）；
var userImage=new Image（）；
//图像的来源
userImage.src=（“Images/userImage.png”）；
//创建一个事件侦听器，然后调用函数redrawravatar
gameCanvas.addEventListener（“mousemove”，重绘化身）；
}
函数重绘化身（mouseEvent）{
var gameCanvas=document.getElementById（“gameCanvas”）；
var userImage=new Image（）；
var enemyImage=新图像（）；
var得分=0；
userImage.src=（“Images/userImage.png”）；
enemyImage.src=（“Images/enemyImage.png”）；
//擦除画布排序刷新，然后按照画布中鼠标的坐标重新绘制图像
gameCanvas.width=400；
gameCanvas.getContext（“2d”）.drawImage（userImage，mouseEvent.offsetX，mouseEvent.offsetY）；
gameCanvas.getContext（“2d”）.drawImage（enemyImage，150150）；
//简单的命中检测，查看用户图像是否命中敌人图像
如果（mouseEvent.offsetX>130&&mouseEvent.offsetX<175&&mouseEvent.offsetY>130&&mouseEvent.offsetY<175）{
分数++；
警惕（“你击中了敌人！\n你的得分是：“+得分”）；
}
}

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，跨浏览器工作的唯一方法是获取画布的位置，并从事件的pageX/pageY属性中减去它。您可以使用画布的getBoundingClientRect（）方法查找其在页面上的位置

这是一个同样适用于Firefox的函数版本示例：

function mouseMovement(mouseEvent) {
    var canvasPosition = gameCanvas.getBoundingClientRect();

    userImageX = mouseEvent.pageX - canvasPosition.left;
    userImageY = mouseEvent.pageY - canvasPosition.top;
}

一个提琴就足够了。一个提琴确实可以帮助LotusOpen FireFox，然后转到这个URL：它在Chrome中对我也不起作用：-）你能检查一下吗？@kobigurk，这是我在Chrome中遇到的错误：Uncaught TypeError:object的属性“src”不是一个函数