HTML 5 Canvas 中的鼠标位置
我正在编写一个简单的绘图应用程序来了解 HTML 5 画布。问题是我似乎无法在画布元素中获得正确的鼠标位置。我已经查看了 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>
<canvas id="test"></canvas>
</body>
</html>
我在这里做错了什么？我已经在 Chrome/Firefox 中对此进行了测试。
I am writing a simple drawing app to get an understanding of the HTML 5 canvas. The problem is that I simply can't seem to get the correct mouse position within the canvas element.I've looked at the other questions on stackoverflow like the one here getting mouse position with javascript within canvas that address this issue but their solutions don't seem to help me.
Here is my code:
<!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>
<canvas id="test"></canvas>
</body>
</html>
What am I doing wrong here? I have tested this in both Chrome/Firefox.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
假设您的画布已经声明...
当您鼠标在画布上移动时，鼠标将更新
Suppose your canvas has already been declared...
Mouse will update when you mouse move on the canvas
您应该向画布元素添加像素尺寸：
这是工作示例 - http://jsfiddle.net/gorsky/GhyPr /。
You should add pixel dimenstion to your canvas element:
Here is working example - http://jsfiddle.net/gorsky/GhyPr/.
您的画布缺少宽度和高度属性。在当前的解决方案中，它只是缩放默认值以适合您的 CSS。这反过来又会破坏你的鼠标坐标。尝试一些
作为画布标记的东西。
Your canvas is missing width and height properties. In the current solution it just scales the default to fit your CSS. This in turn breaks your mouse coords. Try something along
as your canvas markup.