在画布中使用javascript获取鼠标位置 [英] getting mouse position with javascript within canvas
问题描述
我正在学习jquery和html5画布。所有我想做的是一个简单的html5绘图示例。当鼠标移动时，我在我的鼠标下绘制红色方块。
我的代码很简单，但是在画布中获取鼠标光标位置时出现问题。 >
现在，我使用x = event.offsetX;以获得鼠标位置。这在chrome工作得很好，但是当它涉及到firefox，它不工作。我将代码更改为x = event.layerX。但似乎layerX是我的鼠标相对于网页的位置，而不是画布的位置。因为我总是看到一个偏移量。
我有两个问题，首先，在firefox下获得正确的鼠标位置是正确的。第二，如何写一个适用于ie，firefox，chrome，safari和opera的代码？
这里是我的代码：
<！doctype html />
< html>< head>
< script type =text / javascriptsrc =jquery.js>< / script>
< script type =text / javascript>
$（document）.ready（
function（）{
var flip = document.getElementById（'flip'）;
var context = flip.getContext 'd'）;
context.fillStyle =rgb（255,255,255）;
context.fillRect（0，0，500，500）;
$（ ）.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 ）;
context.fillRect（x，y，5，5）;
}
）;
}
）;
< / script>
< / head> < body bgcolor =＃000000> < a href =http://jquery.com/> jQuery< / a>< canvas id =flipwidth =500height =500>
如果您的浏览器不支持HTML5 Canvas，则会显示此文本。< / canvas> < / body>< / html>
<！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 =flipwidth =500height =500>如果您的浏览器不支持HTML5 Canvas，则会显示此文本< / canvas>
< / body>
< / html>
您不必担心兼容性，只有IE（之前的9）不支持canvas 。
I'm studying jquery and html5 canvas. All I want to do is a simple html5 drawing example. When the mouse move, I draw red squares under my mouse.
My code is simple, but I have a problem getting the mouse cursor position within the canvas.
Right now, I am using x=event.offsetX; to get the mouse position. This works very well in chrome, however when it comes to firefox, it doesn't work. I changed the code to x=event.layerX. but it seems that layerX is the position of my mouse relative to the web page, not the position of the canvas. because I always see an offset.
I have two questions, first, what is the right thing to do to get the correct mouse position under firefox. second, how can i write a code that works for ie, firefox, chrome, safari and opera?
here is my code:
<!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>
<!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>
You don't have to worry about compatibility, only IE (prior 9) does not support canvas natively.
这篇关于在画布中使用javascript获取鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
