canvas Koordinaten

Jochen · 26. Februar 2018

Da ist der Schüler wieder.

ich will ein Canvas anlegen mit einem Rechteck innerhalb dieses Canvas.

Das klapp.

Aber die Koordinaten des ctx.rect stimmen nicht mit den Koordinaten ein, die ich über die Mouse erhalte.

So lege ich ein ctx.rect(100,100,60,60);

Die x y Koordinaten lt. Mouse sind :205 276

Wieso das?

MfG

Jochen

<!DOCTYPE html>

<html>

<head>

<title>Click Position</title>

body {

background-color: #FFF;

margin: 30px;

margin-top: 10px;

}

#myCanvas {

position: absolute;

top: 0px;

left: 0px;

width: 600px;

height: 400px;

border: 5px red solid;#thing {

}

</style>

</head>

<body>

Your browser does not support the HTML5 canvas tag.

</canvas>

<span id = 'x'></span>x

<span id = 'y'></span>y

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "20px Arial";

ctx.rect(100,100,60,60);

ctx.stroke();

ctx.fillText(("zufall"),80,50);

function zeigKoord(evt)

{

xPosition= evt.clientX;

yPosition= evt.clientY;

document.getElementById("x").innerHTML=xPosition ;

document.getElementById("y").innerHTML=yPosition ;

}

</script>

</body>

</html>

Sempervivum · 26. Februar 2018

1. Dadurch, dass Du die Größe des Canvas mit CSS fest gelegt hast, wird es herauf skaliert, so dass die Maße, die Du beim Zeichnen des Rechtecks angegeben hast, nicht mehr stimmen. Das kannst Du vermeiden, indem Du die Größe des Canvas nicht über CSS definierst sondern über die Attribute.

2. Tut man dies, hat man immer noch das Problem, dass die Mausposition, die durch evt.clientX und evt.clientY ermittelt wird, sich auf die linke obere Ecke des Anzeigefensters bezieht:

https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/clientX

Besonders deutlich wird das, wenn man den Rahmen ein wenig größer macht.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Click Position</title>

    <style type="text/css">
        body {

            background-color: #FFF;

            margin: 30px;

            margin-top: 10px;

        }

        #myCanvas {

            position: absolute;

            top: 0px;

            left: 0px;

            /* width: 600px;

            height: 400px; */

            border: 20px red solid;
        }
    </style>

</head>

<body onmousedown="zeigKoord(event)">





    <canvas id="myCanvas" width="600" height="400">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

        <span id='x'></span>x

        <span id='y'></span>y

        <script>



            var c = document.getElementById("myCanvas");

            var ctx = c.getContext("2d");

            ctx.font = "20px Arial";



            ctx.rect(100, 100, 60, 60);

            ctx.stroke();

            ctx.fillText(("zufall"), 80, 50);







            function zeigKoord(evt) {

                xPosition = evt.clientX;

                yPosition = evt.clientY;

                document.getElementById("x").innerHTML = xPosition;

                document.getElementById("y").innerHTML = yPosition;

            }



        </script>



    </body>

</html>

Alles anzeigen

canvas Koordinaten

Jetzt mitmachen!

Teilen

Tags