Question

我正在编写一个简单的绘图应用程序来理解HTML 5画布。问题是，我似乎无法在canvas元素中获得正确的鼠标位置。我已经查看了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中测试了这个。

Answer 1

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

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

作为画布标记。

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

鼠标在画布上移动时会更新

Answer 3

您应该为canvas元素添加像素尺寸：

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

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

HTML 5 Canvas中的鼠标位置

3 个答案: