Ein Grundgerüst für die Beeinflussung des Canvas-Inhaltes durch Maus-Ereignisse
Mit einem kleinen, übersichtlichen Beispiel soll verdeutlich werden, wie sich der Inhalt der Canvas-Zeichnungsfläche mit der Maus verändern lässt.
Das Beispiel stellt ein sehr einfaches Malprogramm dar.
Beim Laden der Seite wird die Funktion drawCanvas aufgerufen.
if(window.addEventListener){
addEventListener("load", drawCanvas, false);
}
Die Funktion drawCanvas ermittelt bei jeder Mausbewegung kontinuierlich die Mausposition und ruft die eigentliche Zeichenfunktion auf. Diese fragt den Status einer zuvor gefüllten Maustastenvariable und zeichnet in Abhängigkeit von diesem Status ein Rechteck von 1 Pixel Breite und Höhe (oder auch nicht).
function drawCanvas(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var cx = canvas.getContext('2d');
}
// Position des Mauszeigers
var x, y;
// Wird kontinuierlich abgefragt
canvas.onmousemove = function(e){
//Differenz zwischen Mausposition und Position der Canvas-Fläche ermitteln
//damit an der richten Stelle gezeichnet wird
x = e.clientX-canvas.offsetLeft;
y = e.clientY-canvas.offsetTop;
zeichne();
}
// Malen
var active = false;
//Status der Maustaste abfragen
canvas.onmousedown = function(){ active = true; }
canvas.onmouseup = function(){ active = false; }
function zeichne(){
//Wenn Maustaste gedrückt kleines
if(active){
cx.fillStyle = "rgba(255, 0, 0, 1)";
cx.fillRect(x, y, 1, 1);
}
}//Ende zeichne()
}//Ende