JavaScript画布，绘制的坐标错误

Question

JavaScript画布，绘制的坐标错误

3

我在我的“mousePos”头文件中正确读取和打印鼠标坐标。但是当我使用完全相同的坐标在画布上绘图时，通过单击和拖动将会绘制到底部和右侧太远的位置。如果我不使用style.canvas.width="512px"，可以解决这个问题，但是我就无法设置大小。大小必须为512x512。有什么建议吗？

    
        var resize =1;
        var mouseX, mouseY;
        var pen = "?";
        var canvas = document.getElementById('canvas');
        var menu = document.getElementById('menu');
        var ctx = canvas.getContext('2d');
        var fill = "#FF0000";  //Red
    
        canvas.style.width="512px";
        canvas.style.height="512px";
    
        menu.style.width="512";
        menu.style.height="512";
    
        canvas.addEventListener("mousedown", penDown);
        canvas.addEventListener("mouseup", penUp);
    
        function mouseMove(event) {
            mouseX = event.clientX - ctx.canvas.offsetLeft;
            mouseY = event.clientY - ctx.canvas.offsetTop;
            document.getElementById('mousePos').innerHTML = "Mouse Position: X" + mouseX + " Y" + mouseY;
    
            if(pen == "down") {
                ctx.fillRect(mouseX, mouseY, 4, 4);
            }
        }
    
        function penDown() {
            pen = "down";
            //alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
        }
    
        function penUp() {
            pen = "up";
           // alert("pen = " + pen + " mouse pos:" + mouseX + "," + mouseY);
        }
    
        function backGround() {
            //alert("Called backGround");
            canvas.style.backgroundColor = document.getElementById('BackGround').value;
        }
    
        function penColor(){
            //alert("Called penColor");
            fill = document.getElementById('PenColor').value;
            ctx.fillStyle = fill;
        }
    
        /*
    
            questions:
                Why is my pen not drawing at the mousepos?
    
                use addEventListener or onEvent?
    
                call script when body loads(onDOMcontentLoaded), or call function from script(onload="init()")
    
                Am I taking the right approach, or am I coding myself into a corner?
    
                Any other tips?
        */

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Canvas Test 3</title>
        <script>
        </script>
    </head>
    
    <body bgcolor="#20b2aa">
    
    <canvas id="canvas" style="position: absolute;
             border: 2px solid black; background-color: white"
            onmousemove="mouseMove(event)">
    </canvas>
    
    <div id="menu" style="position: absolute; right: 20%;
                background-color: lightcoral; border: 2px solid black;">
        <p> Back Ground:
            <select id="BackGround" onchange="backGround();">
                <option value="white">white</option>
                <option value="black">black</option>
                <option value="red">red</option>
                <option value="blue">blue</option>
                <option value="green">green</option>
                <option value="yellow">yellow</option>
                <option value="orange">orange</option>
                <option value="purple">purple</option>
            </select>
        </p>
        <p> Pen Color:
            <select id="PenColor" onchange="penColor()">
                <option value="#000000">black</option>
                <option value="#FFFFFF">white</option>
                <option value="#FF0000">red</option>
                <option value="#0000CC">blue</option>
                <option value="#006600">green</option>
                <option value="#FFFF00">yellow</option>
                <option value="#FF3300">orange</option>
                <option value="#990099">purple</option>
            </select>
        </p>
    </div>
    
    <h2 id="mousePos" style="position: absolute; bottom: 5%">Mouse Position | </h2>
    
    </body>
    </html>

- Ryan Miles

如果您将光标移向x和y为0的点（观察标题中显示的坐标），那么该点在哪里？它是在页面客户区域的左上角吗？ctx.canvas.offsetLeft和ctx.canvas.offsetTop是否正确？ - Sam

1个回答

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

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

- halex · Accepted Answer

你需要给你的画布添加属性width和height。这些属性应该与你设置的相应CSS属性相同。

有关此问题的更多信息，请参见Canvas is stretched when using CSS but normal with "width" / "height" properties。

更改：

<canvas id="canvas" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">

到

<canvas id="canvas" width="512" height="512" style="position: absolute; border: 2px solid black; background-color: white" onmousemove="mouseMove(event)">