HTML 5 Canvas中的鼠标位置
[英]Mouse position within HTML 5 Canvas
问题描述
我正在编写一个简单的绘图应用程序来了解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>
<canvas id="test"></canvas>
</body>
</html>
我在这做错了什么？ 我在Chrome / Firefox中测试了这个。
3 个解决方案
解决方案1
5 已采纳 2011-02-06 18:58:39
您的画布缺少宽度和高度属性。 在当前的解决方案中，它只是缩放默认值以适合您的CSS。 这反过来打破了你的鼠标坐标。 尝试一下
<canvas id="test" width=500 height=500></canvas>
作为画布标记。
解决方案2
3 2011-02-06 21:46:28
假设你的画布已经被声明了......
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
}
}
鼠标在画布上移动时鼠标将更新
解决方案3
2 2011-02-06 19:15:28
您应该为canvas元素添加像素尺寸：
<canvas id="test" width='500px' height='500px' ></canvas>
这是工作示例 - http://jsfiddle.net/gorsky/GhyPr/ 。
HTML 5响应式画布中的鼠标位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.