我正在研究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"> …