Ein Grundgerüst mit Benutzer-Interaktion

In bestimmten Fällen soll die Zeichnungsfläche erst dann gefüllt werden, wenn der Besucher der Webseite aktiv wird. Es gibt dabei unterschiedliche Möglichkeiten:

• Klick auf einen Button oder Link
• Beinflussung der Canvas-Zeichnung mit der Maus
• Beinflussung der Canvas-Zeichnung mit der Tastatur

Hier soll gezeigt werden, wie eine Canvas-Zeichnung mit einem Button-Click gefüllt wird.

Der head-Abschnitt der HTML-Datei ist gegenüber den früheren Beispielen unverändert. Der wesentliche Unterschied besteht nur darin, dass die Funktion zum Füllen der canvas-Fläche mit einem Button verbunden wird. Der Quellcode des JavaScript-Teils ist im wesentlichen unverändert und sieht so aus:

<script type="text/javascript">
//Alles wird schön in eine Funktion gepackt
function zeichneCanvas(){
	var myCanvas = document.getElementsByTagName('canvas')[0];
	if(myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		context.fillStyle = "rgb(0, 255, 0)";
		context.fillRect(0, 0, myCanvas.width, myCanvas.height);
	}
}
</script>

Ein onload-Funktionsaufruf fehlt, denn die Funktion zeichneCanvas () soll ja erst aufgerufen werden, wenn der Benutzer agiert. Das geschieht dann ganz einfach so:

<!--Button mit Aufruf des JavaScripts-->
<p><button onclick="zeichneCanvas();">Zeichne in Canvas</button></p>

Beispiel ansehen