Javascript HTML5画布中的鼠标位置_Javascript_Html_Canvas

Javascript HTML5画布中的鼠标位置

javascript html canvas

Javascript HTML5画布中的鼠标位置,javascript,html,canvas,Javascript,Html,Canvas,我正在编写一个简单的绘图应用程序，以了解HTML5画布。问题是我似乎无法在canvas元素中获得正确的鼠标位置。我已经研究了stackoverflow上的其他问题，比如这里解决这个问题的问题，但他们的解决方案似乎对我没有帮助这是我的密码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88

我正在编写一个简单的绘图应用程序，以了解HTML5画布。问题是我似乎无法在canvas元素中获得正确的鼠标位置。我已经研究了stackoverflow上的其他问题，比如这里解决这个问题的问题，但他们的解决方案似乎对我没有帮助

这是我的密码：

<!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>


无标题文件
#试验{
边框：纯黑1px；
宽度：500px；
高度：500px；
}
$（函数（）{
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=“圆形”；
$（'#test'）.mousedown（函数（）{draw=true；}）；
$（'#test'）.mouseup（函数（）{draw=false；}）；
$（'#test'）.mousemove（函数（e）{
如果（抽签）{
变量x，y；
x=e.rx；
y=e.分层；
ctx.moveTo（x，y）；
ctx.lineTo（x+1，y+1）；
ctx.stroke（）；
}
});
}
});

我做错了什么？我已经在Chrome/Firefox上测试过了

画布缺少宽度和高度属性。在当前的解决方案中，它只是扩展默认值以适合您的CSS。这反过来又打破了你的鼠标坐标。试一试

<canvas id="test" width=500 height=500></canvas>

作为画布标记。

您应该向画布元素添加像素尺寸：

<canvas id="test" width='500px' height='500px' ></canvas>

下面是一个工作示例-。

假设您的画布已声明

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
    }
}

当您在画布上移动鼠标时，鼠标将更新

谢谢您的夸奖！CSS的宽度和高度似乎没有定义画布的坐标系。我应该仔细阅读说明书的。谢谢戈尔！我错误地假设css宽度/高度也定义了canvas元素的坐标系。