kramann.info
© Guido Kramann

Login: Passwort:










2.5.2 Mausereignisse

2.5.2 mouse Events (EN google-translate)

2.5.2 Zdarzenia myszy (PL google-translate)

Mausereignisse können verarbeitet werden, wenn entsprechende Maus-Listener-Funktionen beim Canvas registriert werden.

Mouse events can be processed when corresponding mouse listener functions are registered with the canvas.

Zdarzenia myszy mogą być przetwarzane, gdy odpowiednie funkcje nasłuchiwania myszy są zarejestrowane w obszarze roboczym.

Ein Beispiel soll dies demonstrieren:

An example should demonstrate this:

Przykład powinien to wykazać:


<html>
    <head lang="de">
        <meta charset="iso-8859-1">
        <script language:javascript>
            const DURCHMESSER = 20;
            const CANVAS_BREITE = 500;
            const CANVAS_HOEHE  = 200;

            var malkontext = null;
            var MAUS_X = 0;
            var MAUS_Y = 0;
            var zeitgeber;

            var merker = new Array();            

            function verarbeiteMaus(event)
            {
                MAUS_X = event.offsetX;
                MAUS_Y = event.offsetY;
            }

            function verarbeiteMausklick(event)
            {
                merker[merker.length] = new Array(MAUS_X,MAUS_Y);
            }

            function zeitschritt()
            {
                malkontext.fillStyle = "#999999";
                malkontext.fillRect(0,0,CANVAS_BREITE,CANVAS_HOEHE);

                malkontext.fillStyle = "#00ff00";
                for(var i=0;i<merker.length;i++)
                {
                    malkontext.beginPath();
                    malkontext.arc(merker[i][0],merker[i][1],DURCHMESSER,0,2.0*Math.PI,true);
                    malkontext.fill();            
      
                }
                malkontext.fillStyle = "#ff0000";
                malkontext.beginPath();
                malkontext.arc(MAUS_X,MAUS_Y,DURCHMESSER,0,2.0*Math.PI,true);
                malkontext.fill();            
            }

            function initialisieren()
            {
                malkontext = document.getElementById("grafik").getContext("2d"); 

                document.getElementById("grafik").width = CANVAS_BREITE;
                document.getElementById("grafik").height = CANVAS_HOEHE;

                document.getElementById("grafik").addEventListener("mousemove",verarbeiteMaus,false);
                document.getElementById("grafik").addEventListener("mousedown",verarbeiteMausklick,false);

                zeitgeber = setInterval(zeitschritt,100);
            }
        </script>
    </head>
    <body>
        <input style="width:200px" type="button" id="snap" value="starten" onclick="javascript:initialisieren()"/>
        <br/>
        <canvas id="grafik" width="5" height="2"></canvas>
    </body>
</html>

Code 2.5.2-1: Quelltext zu obigem Beispiel.