我正在研究 jquery 和 html5 canvas。我只想做一个简单的 html5 绘图示例。当鼠标移动时，我在鼠标下方绘制红色方 block 。
我的代码很简单，但是我在获取 Canvas 内的鼠标光标位置时遇到了问题。
现在，我正在使用 x=event.offsetX；获取鼠标位置。这在 chrome 中工作得很好，但是当涉及到 firefox 时，它不起作用。我将代码更改为 x=event.layerX。但是好像layerX是我的鼠标相对于网页的位置，而不是 Canvas 的位置。因为我总是看到偏移量。
我有两个问题，第一，在 firefox 下如何获得正确的鼠标位置是正确的。其次，我如何编写适用于 ie、firefox、chrome、safari 和 opera 的代码？
这是我的代码:
<!doctype html />
<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, 500, 500);
$("a").click(function(event){alert("Thanks for visiting!");});
$("#flip").mousemove(function(event){
var x, y;
x = event.layerX;
y = event.layerY;
//alert("mouse pos"+event.layerX );
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(x, y, 5, 5);
}
);
}
);
</script>
</head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>
最佳答案
我看到很多关于这个主题的问题，并且都建议浏览 DOM 或使用 offsetX 和 offsetY，这些设置并不总是正确的。
您应该使用函数:canvas API 中的 canvas.getBoundingClientRect()。
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);
}, false);
关于javascript - 在 Canvas 中使用javascript获取鼠标位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4848310/