HTML 5 Canvas 中的鼠标位置答案

【问题标题】：Mouse position within HTML 5 CanvasHTML 5 Canvas 中的鼠标位置
【发布时间】：2011-02-23 21:57:34
【问题描述】：

我正在编写一个简单的绘图应用程序来了解 HTML 5 画布。问题是我似乎无法在画布元素中获得正确的鼠标位置。我已经查看了 stackoverflow 上的其他问题，例如getting mouse position with javascript within canvas 解决此问题的问题，但他们的解决方案似乎没有帮帮我。

这是我的代码：

<!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 中对此进行了测试。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

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

作为你的画布标记。

【讨论】：

感谢 bebraw 成功了！似乎CSS宽度和高度没有定义画布的坐标系。我应该更仔细地阅读规格。

【解决方案2】：

假设你的画布已经被声明...

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】：

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

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

这是工作示例 - http://jsfiddle.net/gorsky/GhyPr/。

【讨论】：

谢谢你！我错误地假设 css 宽度/高度也定义了画布元素的坐标系。