简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript – Probleme beim Abrufen von Mauskoordinaten im Canvas
过去多啦不再A梦
过去多啦不再A梦 2017-05-19 10:29:32
0
1
564

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)
我想大声告诉你
我想大声告诉你2017-05-19 10:31:32 1 Etage 
<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的区别

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！