HTML 5画布中的鼠标位置

Question

HTML 5画布中的鼠标位置

4

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

- kartikq

3个回答

3

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

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

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

- canvastag

2

你应该给你的画布元素添加像素尺寸：

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

这里有一个可工作的例子 - http://jsfiddle.net/gorsky/GhyPr/。

- gor

谢谢gor！我犯了一个错误，认为CSS的宽度/高度也定义了画布元素的坐标系。 - kartikq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juho Vepsäläinen · Accepted Answer

您的画布缺少宽度和高度属性。在当前解决方案中，它只是按比例缩放默认值以适应您的 CSS。这反过来会破坏您的鼠标坐标。尝试使用类似以下的内容：

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

作为您的画布标记。