在画布中使用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屋!