javascript – Probleme beim Abrufen von Mauskoordinaten im Canvas
过去多啦不再A梦
过去多啦不再A梦 2017-05-19 10:29:32
0
1
574

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梦
过去多啦不再A梦

Antworte allen(1)
我想大声告诉你
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>

换成

<canvas id="cav" width="400" height="400" style="background: white"></canvas>

canvas标签的width和height以及style.width和style.height的区别

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage