HTML 5 Canvas中的鼠标位置
[英]Mouse position within HTML 5 Canvas
问题描述
I am writing a simple drawing app to get an understanding of the HTML 5 canvas. 
我正在编写一个简单的绘图应用程序来了解HTML 5画布。 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. 问题是我似乎无法在canvas元素中获得正确的鼠标位置。我已经查看了stackoverflow上的其他问题，就像在这里用javascript在画布中获取鼠标位置来解决这个问题，但是他们的解决方案没有好像在帮助我。
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. 我在Chrome / Firefox中测试了这个。
3 个解决方案
解决方案1
5 已采纳 2011-02-06 18:58:39
Your canvas is missing width and height properties. 您的画布缺少宽度和高度属性。 In the current solution it just scales the default to fit your CSS. 在当前的解决方案中，它只是缩放默认值以适合您的CSS。 This in turn breaks your mouse coords. 这反过来打破了你的鼠标坐标。 Try something along 尝试一下
<canvas id="test" width=500 height=500></canvas>
as your canvas markup. 作为画布标记。
解决方案2
3 2011-02-06 21:46:28
Suppose your canvas has already been declared... 假设你的画布已经被声明了......
var Mouse = { //make a globally available object with x,y attributes
x: 0,
y: 0
}
canvas.onmousemove = function (event) { // this object refers to canvas object
Mouse = {
x: event.pageX - this.offsetLeft,
y: event.pageY - this.offsetTop
}
}
Mouse will update when you mouse move on the canvas 鼠标在画布上移动时鼠标将更新
解决方案3
2 2011-02-06 19:15:28
You should add pixel dimenstion to your canvas element: 您应该为canvas元素添加像素尺寸：
<canvas id="test" width='500px' height='500px' ></canvas>
Here is working example - http://jsfiddle.net/gorsky/GhyPr/ . 这是工作示例 - http://jsfiddle.net/gorsky/GhyPr/ 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.