Zeichnen auf unsere canvas-Leinwand

Das Zeichnen selber auf der Leinwand erfolgt über JavaScript – sprich wir sollen sicherstellen, dass unsere HTML-Seite komplett geladen ist und dann unsere Zeichenfläche „aktivieren“, bevor wir diese nutzen.

Um Sicherzustellen, dass die HTML-Seite komplett geladen wurde, nutzen wir den jQuery-Aufbau mit:

$(document).ready(function() {
}

Nun greifen wird über getElementById auf den eindeutigen Namen unseres HTML5-Elements canvas zu und aktivieren dieses

$(document).ready(function() {
	var spielbrett = document.getElementById('leinwand');
}

Zum Testen können wir in Chrome unter dem Reiter „Console“ den Inhalt von „spielbrett“ uns ausgeben lassen:

$(document).ready(function() {
	var spielbrett = document.getElementById('leinwand');
	console.log(spielbrett);
}

$(document).ready(function() {
    var spielbrett = document.getElementById('leinwand');
}

Jetzt wollen wir die Möglichkeiten von unserem Canvas-Element ausschöpfen – sprich die zahlreichen Möglichkeiten anwenden. Allerdings müssen wir als erst eine Zugriffsmöglichkeit schaffen und die Ausgabeart („Context“) auf „2d“ einstellen. Da wir diesen Zugriff sehr oft benötigen, sollte diese Variable kurz sein – sprich verwendet wird „c“ – gedanklich kann man hinter „c“ sich das canvas-Objekt vorstellen.

$(document).ready(function() {
	var spielbrett = document.getElementById('leinwand');
	var c = spielbrett.getContext('2d');
}

Und nun können wir die Methoden anwenden, die verfügbar sind wie Beispielsweise das Zeichnen von einem Rechteck: c.fillRect(x, y, breite, hoehe)

$(document).ready(function() {
	var spielbrett = document.getElementById('leinwand');
	var c = spielbrett.getContext('2d');
	c.fillRect(50, 50, 75, 75);
}

Und das können wir beliebig oft machen:

$(document).ready(function() {
	var spielbrett = document.getElementById('leinwand');
	var c = spielbrett.getContext('2d');
	c.fillRect(50, 50, 75, 75);
	c.fillRect(100, 50, 90, 90);
	c.fillRect(50, 100, 100, 50);
}
canvas.fillStyle = "rgb(200,0,0)";
canvas.fillRect( 10, 10, 55, 55 );

Um eine Linie zu zeichnen, benötigen wir den Startpunkt und den Endpunkt. Das besondere bei Linien mit dem Canvas-Objekt ist, dass wir die Linie von Punkt zu Punkt zu Punkt weiterzeichnen können und somit ganze Figuren. Aber der Reihe nach.

Als ersten Schritt legen wir fest, dass wir eine Linie zeichnen wollen mit der Anweisung beginPath();.

c.beginPath();

Dann setzen wir unseren Startpunkt mit der Anweisung moveTo(x, y). Zur Erinnerung – der Nullpunkt unseres Systems liegt in der linken oberen Ecke. Mit x = 50 wegen wir uns 50 Pixel nach rechts und mit der Angabe y = 200 bewegen wir uns 200 Pixel nach unten. Das soll unser Startpunkt sein.

c.beginPath();
c.moveTo(50, 200);

Und als folgende Angabe kommt der Folgepunkt, wo die Linie hingezeichnet werden soll. Der Aufbau der Werte für die Anweisung ist wieder identisch: lineTo(x, y);

c.beginPath();
c.moveTo(50, 200);
c.lineTo(150, 120);

Bisher wird in unserem Canvas-Objekt noch nichts gezeichnet. Dies erfolgt erst über die Anweisung stroke();

c.beginPath();
c.moveTo(50, 200);
c.lineTo(150, 120);
c.stroke();

Hiermit bekommen wir eine Linie von Startpunkt 50, 200 zu dem Endpunkt 150,120.

Soll die Linie vom bisherigen Endpunkt weitergezeichnet werden, werden einfach weitere lineTo ergängt, bevor über stroke(); das Zeichnen stattfindet. So bekommen wir sehr schnell eine Zickzack-Linie:

c.beginPath();
c.moveTo(50, 200);
c.lineTo(150, 120);
c.lineTo(170, 160);
c.lineTo(200, 100);
c.stroke();