Question

我正在我的“mousePos”标题中正确阅读和打印鼠标坐标但是当我在画布上绘制时，使用相同的精确坐标，通过单击并拖动，我绘制到远到底部并远到对。我可以通过不使用style.canvas.width =“512px”来解决这个问题，但是我无法设置大小。大小必须是512乘512.

任何提示？

    
        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>

Answer 1

您必须将属性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)">

Javascript画布，绘制错误的坐标

1 个答案: