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:
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>