Mausereignisse
(EN google-translate)
(PL google-translate)
Mausereignisse können verarbeitet werden, wenn entsprechende Maus-Listener-Funktionen beim Canvas registriert werden.
Ein Beispiel soll dies demonstrieren:
<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 0-1: Quelltext zu obigem Beispiel.