HTML 5 Canvas中的鼠标位置

Question

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>

Run Code Online (Sandbox Code Playgroud)

我在这做错了什么？我在Chrome/Firefox中测试了这个.

Answer 1

Juh*_*nen 5

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

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

Run Code Online (Sandbox Code Playgroud)

作为画布标记.

归档时间：	15 年前
查看次数：	8535 次
最近记录：	15 年前