我得到的 mouseEvent.offsetX 比实际画布尺寸大得多答案

【问题标题】：The mouseEvent.offsetX I am getting is much larger than actual canvas size我得到的 mouseEvent.offsetX 比实际画布尺寸大得多
【发布时间】：2013-06-10 23:53:19
【问题描述】：

当我使用以下 Javascript 代码时

function init() {
    var gameCanvas = document.getElementById("gameCanvas");
    document.getElementById("canvasWidth").innerHTML = gameCanvas.width;

    gameCanvas.addEventListener("mousemove", handleMouseEvent);
}


function handleMouseEvent(mouseEvent) {
    document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;
}

用这个html

<body>
    <div id="mainScreen">
        <div id="topScreen">
        <h1 id="canvasWidth">Score:</h1>
        <h1 id="mouseX">0</h1>
        </div>
        <div id="gameScreen">
            <canvas id="gameCanvas" onclick="init()">               
            </canvas>
        </div>
    </div>
</body>

画布宽度显示为 300，而留在画布中的 mouseX 则远远超过 300。我已经为它链接了一个屏幕截图。它在 Chrome 中运行良好，但它没有在 Internet Explorer 和 Windows 商店应用中工作。

截图：http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

指针位于右边缘附近，但屏幕截图中没有出现，这就是我标记它的原因。顶部的第一个数字是画布宽度，第二个数字显示指针 offsetX。

为什么会出现这种情况，如何纠正？

更新（添加 CSS 代码）

Css 代码

#mainScreen {
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px 100px 20px 1fr 30px;
    height:inherit;
}

#topScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px;
    -ms-grid-rows: 20px 1fr 20px;
}

#canvasWidth {
    display: -ms-grid;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

#mouseX {
    display: -ms-grid;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
}

#gameScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
    -ms-grid-rows:1fr;
    -ms-grid-columns: 1fr;
    height:inherit;
    width:inherit;
}
#gameCanvas {
    height:inherit;
    width:inherit;
    background-color:white;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

【问题讨论】：

这里有任何帮助：stackoverflow.com/questions/55677/…
谢谢，但没有帮助。

标签： javascript canvas

【解决方案1】：

查看两者的区别偏移X， X层，第X页，客户X， screenX 属性这可能有用 MouseEventsProperties.... 不同的浏览器支持不同的属性了解它们后，您将了解如何使用这些属性，以便您的应用程序适用于所有平台

好的，这是我在 chrome、safari、firefox 甚至 iPad 等触控设备上编写和测试的代码（一个非常简化的版本）。代码将事件对象作为参数，它将返回具有相对于画布的 X 和 Y 的坐标对象。希望这会有所帮助...

containerX = document.getElementById('container').offsetLeft;
containerY = document.getElementById('container').offsetTop;
//here container is the id of my canvas basically the above two lines are global 
// in my code 

function getX_Y(evt){
var coord={
    X: null,
    Y: null
}
var isTouchSupported = 'ontouchstart' in window;
if(isTouchSupported){                     // for touch devices
    coord.X = evt.clientX-containerX;
    coord.Y = evt.clientY-containerY;
    return coord;
}

else if(evt.offsetX || evt.offsetX == 0){    //for webkit browser like safari and chrome
    coord.X = evt.offsetX;
    coord.Y = evt.offsetY;
    return coord;
}

else if(evt.layerX || evt.layerX == 0){      // for mozilla firefox
    coord.X = evt.layerX;
    coord.Y = evt.layerY;
    return coord;
}
}

【讨论】：

感谢您的回复，现在我可以弄清楚它们之间的区别了。但我不知道 clientX 和 offsetX 之间是否有很大区别（它们看起来几乎一样）。尽管使用 clientX 的结果非常相似。 PageX 和 layerX 不同，这里不能使用。所以解决方案没有奏效。
没用，除了 IE 和 Windows 8 应用程序模拟器外，其他地方都可以工作。还尝试了这个html5canvastutorials.com/advanced/… 没有任何帮助。（为什么世界上有人制作了 IE ！！）。我想这与 CSS 代码有关，因为当我不将画布宽度设置为继承时，它变为 300，这就是 canvas.width 显示的内容。我已经用 CSS 代码更新了问题，你可以看看它。
@AbhishekVerma 您在哪个版本的 IE 中尝试过？实际上，给定的功能在我的系统中的所有平台上都可以正常工作（我使用的是 IE-10）
我也在用IE10，其实我在做一个Windows 8游戏，但是当它在Windows 8模拟器中不起作用时，我在IE10中尝试过，它再次不起作用。但它适用于 chrome（可能是因为 chrome 无法识别 Css 中的 -ms- 代码）。没有Css，代码也能正常工作。您是否尝试过我的代码，包括 Css 代码？