在画布中使用javascript获取鼠标位置
[英]getting mouse position with javascript within canvas
问题描述
我正在研究jquery和html5画布。 我想做的只是一个简单的html5绘图示例。 当鼠标移动时，我在鼠标下面画出红色方块。
我的代码很简单，但是在画布中获取鼠标光标位置时遇到了问题。
现在，我正在使用x = event.offsetX; 获得鼠标位置。 这在chrome中非常有效，但是当涉及到firefox时，它不起作用。 我将代码更改为x = event.layerX。 但似乎layerX是我的鼠标相对于网页的位置，而不是画布的位置。 因为我总是看到一个偏移。
我有两个问题，首先，在Firefox下获得正确的鼠标位置是正确的。 第二，我怎样才能编写适用于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>
3 个解决方案
解决方案1
16 2013-09-27 10:24:51
我看到很多关于这个主题的问题，所有人都建议浏览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);
解决方案2
9 已采纳 2011-01-31 13:46:21
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script>
Element.prototype.leftTopScreen = function () {
var x = this.offsetLeft;
var y = this.offsetTop;
var element = this.offsetParent;
while (element !== null) {
x = parseInt (x) + parseInt (element.offsetLeft);
y = parseInt (y) + parseInt (element.offsetTop);
element = element.offsetParent;
}
return new Array (x, y);
}
document.addEventListener ("DOMContentLoaded", function () {
var flip = document.getElementById ("flip");
var xy = flip.leftTopScreen ();
var context = flip.getContext ("2d");
context.fillStyle = "rgb(255,255,255)";
context.fillRect (0, 0, 500, 500);
flip.addEventListener ("mousemove", function (event) {
var x = event.clientX;
var y = event.clientY;
context.fillStyle = "rgb(255, 0, 0)";
context.fillRect (x - xy[0], y - xy[1], 5, 5);
});
});
</script>
<style>
#flip {
border: 1px solid black;
display: inline-block;
}
body {
text-align: center;
}
</style>
</head>
<body>
<canvas id = "flip" width = "500" height = "500">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</body>
</html>
您不必担心兼容性，只有IE（之前的9）本身不支持canvas。
解决方案3
2 2011-01-31 16:04:21
您将需要一个自定义函数来确定元素的位置，然后确定鼠标在该元素中的位置。 这是一个例子 。 它使用quirks模式和我的JavaScript库中的这个函数，这应该不难翻译成jQuery。
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft, curtop];
}
}
编辑
这在IE中不起作用，因为它不支持pageX。 你必须通过一个函数来传递事件对象像这样纠正。 但正如2x2p1p所说，版本9以下的任何Internet Explorer都不支持canvas。
在画布中获取鼠标位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.