我正在研究 jquery 和 html5 canvas。我想做的只是一个简单的 html5 绘图示例。当鼠标移动时，我在鼠标下方绘制红色方块。
我的代码很简单，但在获取画布内的鼠标光标位置时遇到问题。
现在，我正在使用 x=event.offsetX;来获取鼠标位置。这在 Chrome 中工作得很好，但是当涉及到 Firefox 时，它就不起作用了。我将代码更改为 x=event.layerX。但似乎layerX是我的鼠标相对于网页的位置，而不是画布的位置。因为我总是看到偏移量。
我有两个问题，第一，在 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);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
