javascript – Probleme beim Abrufen von Mauskoordinaten im Canvas

Ich möchte mit der Maus einen Strichzeichnungseffekt erzeugen, der der Strichzeichnungsfunktion des im Fenster enthaltenen Zeichenbretts ähnelt. Dazu müssen die Koordinaten der Maus ermittelt werden, aber ich habe immer das Gefühl, dass die Koordinaten nicht genau ermittelt werden. Jedes Mal, wenn ich eine Linie auf der Leinwand zeichne, wird die Linie immer deutlich unterhalb des Cursors gezeichnet, nicht von der Position des Cursors aus Linien zeichnen. Wenn Sie am unteren Rand der Leinwand eine Linie zeichnen und diese überhaupt nicht herauskommen kann, überschreitet der tatsächlich erhaltene Koordinatenwert möglicherweise die Größe der Leinwand. Könnte es sein, dass meine Methode zum Erhalten von Koordinatenwerten falsch ist? Ich möchte alle fragen!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style> body {
        background: #000;
    } </style>
    <script> window.onload = function () {
        var oC = document.getElementById('cav');
        var ctx = oC.getContext('2d');
        oC.onmousedown = function (evt) {
            var x = evt.pageX - oC.offsetLeft;
            var y = evt.pageY - oC.offsetTop;
            ctx.moveTo(x, y);
            oC.onmousemove = function (evt) {
                var x = evt.pageX - oC.offsetLeft;
                var y = evt.pageY - oC.offsetTop;
                ctx.lineTo(x, y);
                ctx.stroke();
            }
            oC.onmouseup = function () {
                oC.onmousemove = null
            }
        }
    } </script>
</head>
<body>
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>
</body>
</html>

过去多啦不再A梦2750 Tage vor581

javascript – Probleme beim Abrufen von Mauskoordinaten im Canvas

Antworte allen(1)Ich werde antworten