Canvas-Tag wird auf meiner Seite verschoben

StackOverflow https://stackoverflow.com/questions/8828474

Frage

Ich versuche einfach, die Maus über mein Canvas-Tag zu führen und zu protokollieren, wie weit es vom Mittelpunkt eines Kreises entfernt ist.Das Problem ist, es ist leicht aus.

Wenn ich mich auf der rechten Seite des Kreises befinde, muss sich die Maus etwa 1 cm innerhalb des Kreises befinden, bevor ich einen Abstand von r (Radius= 200) zeige.Wenn ich mich auf der linken Seite des Kreises befinde, muss ich ungefähr 1 cm außerhalb des Kreises sein, um einen Abstand von r zu registrieren.Es ist, als wäre der Kreis ein bisschen nach rechts verschoben.

Ich habe versucht, dies mit einer Geige zu reproduzieren, aber seltsamerweise ist die Geige perfekt.es ist genau richtig.

Ich denke also, meine Frage ist, was dazu führen würde, dass mein Canvas-Tag auf meiner Seite um etwa 1 cm verschoben wird (aber nicht auf der Geige).Benötige ich einen besseren DOCTYPE?Ich reproduziere meine gesamte Quelle unten.Ich habe sowohl in FF als auch in Chrome getestet - dasselbe Ergebnis.

EDIT

Ich habe auch <!DOCTYPE html> ohne Erfolg ausprobiert. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            var context = document.getElementById("myCanvas").getContext("2d");

            context.beginPath();
            context.moveTo(250, 250);
            context.arc(250, 250, 200, 0, Math.PI * 2, false);
            context.closePath();
            context.fillStyle = 'rgb(255,100,0)';
            context.fill();


            $("canvas").mousemove(function (e) {
                var x = e.pageX;
                var y = e.pageY;

                var dist = Math.round(Math.sqrt(Math.pow(x - 250.0, 2) + Math.pow(y - 250.0, 2)));

                console.log(dist);
            });
        });


    </script>


</head>
<body>

    <canvas id="myCanvas" width="800" height="800">

    </canvas>

</body>
</html>

War es hilfreich?

Lösung

Ja, tatsächlich scheint es, dass body{margin:0, padding:0, border:0} den Trick macht. Nebenbei bemerkt, anstatt alle diese mathematischen Funktionen aufzurufen, wäre Folgendes einfacher und schneller: 

var x = e.pageX - 250;
var y = e.pageY - 250;
var dist = Math.round(Math.sqrt(x * x + y * y));

Die Verwendung eines CSS-Reset-Kits würde wahrscheinlich alle Ihre Probleme für alle Browser lösen.

Ich war neugierig und habe die Standardeinstellungen überprüft: 

var bodyElement = $('body');

// Get the padding
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');
console.log(widthPadding + ", "+ heightPadding);
// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');
console.log(widthMargin + ", "+ heightMargin);
// Get the borders
var widthBorder = bodyElement.css('border-left-width') + bodyElement.css('border-right-width');
var heightBorder = bodyElement.css('border-top-width') + bodyElement.css('border-bottom-width');
console.log(widthBorder + ", "+ heightBorder);

Die Ausgabe in FF 9.0.1 war wie folgt: 

0px0px, 0px0px 
8px8px, 8px8px <-- So obviously you only need to reset the margins to 0
0px0px, 0px0px

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top