将单击事件处理程序添加到将返回单击的x和y坐标(相对于canvas元素)的canvas元素的最简单方法是什么？
不需要传统的浏览器兼容性,Safari,Opera和Firefox都可以.
有没有办法将位置鼠标放在<canvas>标签内？我想要相对于右上角的位置<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"> …我正在编写一个简单的绘图应用程序来了解HTML 5画布.问题是我似乎无法在canvas元素中获得正确的鼠标位置.我已经查看了stackoverflow上的其他问题,就像在这里用javascript在画布中获取鼠标位置来解决这个问题,但是他们的解决方案没有好像在帮助我.
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#test {
border: solid black 1px;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
$(function(){
var canvas=document.getElementById('test');
if(canvas.getContext){
var ctx =canvas.getContext('2d');
var draw = false;
ctx.strokeStyle = "rgb(200,0,0)";
ctx.lineWidth = 3;
ctx.lineCap = "round";
$('#test').mousedown(function(){draw=true;});
$('#test').mouseup(function(){draw=false;});
$('#test').mousemove(function(e){
if(draw){
var x , y;
x = e.layerX;
y = e.layerY;
ctx.moveTo(x,y);
ctx.lineTo(x+1,y+1);
ctx.stroke();
}
});
}
});
</script>
</head>
<body> …