当我使用时使用以下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 …首先，我知道这个问题已经问过很多次了。但是，提供的答案不一致，并且使用多种方法来获取鼠标位置。一些例子：
方法1：
canvas.onmousemove = function (event) { // this object refers to canvas object
Mouse = {
x: event.pageX - this.offsetLeft,
y: event.pageY - this.offsetTop
}
}
方法2：
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
方法3：
var findPos = function(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return { x …请帮我:
在下面的画布中创建可点击的区域,我可以将onmousedown = events分配给.我知道如何用隐形DIV做到这一点,但我认为在画布上有一种更优雅的方式来做我不知道的事情.
当我单击其中一个区域时,想要将图像名称传递给一个函数,以便将显示的图像更改为另一个图像,然后将其更改为onmouseup.
如果你只给我一个区域和一个mousedown/mouseup示例,我可以做其余的...谢谢.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="firstImage.gif";
</script>
/////////HERE NEED/////////
CREATE CLICKABLE REGION <region>
<region>
onmousedown=changeCanvasImage(secondImage.gif) //change image on click
onmouseup=changeCanvasImage(firstImage.gif) /change it back when done
</region>
</body>
</html>
我有以下功能来获取鼠标点击位置(坐标).
$('#myCanvas').on('click', function(e) {
event = e;
event = event || window.event;
var canvas = document.getElementById('myCanvas'),
x = event.pageX - canvas.offsetLeft,
y = event.pageY - canvas.offsetTop;
alert(x + ' ' + y);
});
我需要在点击位置时获得鼠标点,并在拖动鼠标点位置后将其锁定.
即,mousedown点和mouseup点.
我试图找出画布上是否有黑色像素
var check = function(player,keyPressed) {
//series of ifs to determine what pixel to check.
}
如果像素为假,我需要返回true或false,我尝试了getImageData,但我无法弄清楚如何正确使用它.
我有一个图像上有网格线,并希望允许用户在这些网格线上绘制更粗的线条,每条线条应该从一个交叉点到下一个交叉点.我应该在哪里开始研究？我意识到这可能是一个非常广泛的问题,我只想在这里寻找一些方向.寻找php和jquery/javascript解决方案.
非常感谢,托德
canvas ×5
javascript ×4
html5 ×2
jquery ×2
coordinates ×1
draw ×1
grid ×1
html ×1
html5-canvas ×1
mouse ×1
mouseevent ×1
php ×1