Khi tôi sử dụng sử dụng mã Javascript sauCác mouseEvent.offsetX Tôi nhận được là lớn hơn nhiều so với kích thước vải thực tế
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;;
}
với html này
<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>
Chiều rộng vải được hiển thị 300 trong khi mouseX vẫn còn trong khung hình vượt quá 300. Tôi đã liên kết ảnh chụp màn hình cho nó. Nó hoạt động tốt trong Chrome nhưng nó không hoạt động trong Internet Explorer và trong các ứng dụng cửa hàng Windows.
Ảnh chụp màn hình: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae
Con trỏ đang ở đâu đó gần cạnh phải nhưng nó đã không đến trong ảnh chụp màn hình, đó là lý do tại sao tôi đánh dấu nó. Số đầu tiên ở trên cùng là chiều rộng của canvas và số thứ hai hiển thị con trỏ offsetX.
Tại sao điều này xảy ra, cách sửa lỗi?
Cập nhật (Added mã CSS)
mã 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;
}
Bất cứ điều gì giúp đỡ ở đây: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click -on-a-canvas-element? rq = 1 –
Cảm ơn, nhưng nó không giúp được gì. –