JavaScript: Canvas: Figuren stempeln

Programmieren mit JavaScript

Bilder "stempeln"

Canvas - Grundlagen Inhalt Bewegte Bilder (Animationen)

Beispiel 1

Den Quelltext für das Beispiel nebenan finden Sie unter

canvasStempeln.html

function windmuehle

Es sollen (sehr) viele Windmühlen gezeichnet werden. Wir wollen deshalb eine Methode (function) für eine Windmühle entwerfen und diese Methode dann mehrfach anwenden. Damit Windmühlen an unterschiedlichen Stellen des Canvas gezeichnet werden können, müssen wir der Methode die Stelle, an der gezeichnet werden soll, mitgeben - als Parameter.

function windmuehle (cv, xpos, ypos){ ... }

Der erste Parameter (cv) gibt an, auf welcher Leinwand(canvas) gezeichnet werden soll. Auf dieser Seite gibt es nämlich schon zwei Leinwände: die obere mit den vielen Windmühlen und die unten mit dem Koordinatensystem.

genau betrachtet

Wir zeichnen zunächst den Umriss des Rechtecks. Links unten ist der Punkt, der den Ort der Figur angibt. Er ist xpos Pixel vom linken Canvasrand entfernt und ypos Pixel vom oberen. Also:

cv.moveTo(xpos, ypos);

Der Eckpunkt rechts unten ist 20 Pixel weiter vom linken Rand entfernt (bei gleicher "Höhe"):

cv.lineTo(xpos + 20, ypos);

Der Punkt rechts oben liegt 100 Pixel höher, also näher am oberen Rand, die Entfernung zum oberen Rand ist demnach 100 Pixel kleiner:

cv.lineTo(xpos + 20, ypos - 100);

Links oben haben wir wieder dieselbe Entfernung zum linken Rand wie beim ersten Punkt:

cv.lineTo(xpos     , ypos - 100);
cv.fill();

Die Flügel beginnen alle in einem Punkt, der "oben in der Mitte des Gebäudes" liegt, 10 Pixel von links und 10 Pixel von oben. Also immer:

cv.moveTo(xpos + 10, ypos - 90);

Die Endpunkte der Flügel liegen jeweils 50 Pixel weiter rechts/links und unten/oben.

cv.lineTo(xpos + 60, ypos - 140);
cv.lineTo(xpos + 60, ypos - 40);
cv.lineTo(xpos -40, ypos - 40);
cv.lineTo(xpos -40, ypos - 140);

In der Grafik mit den vielen Mühlen sind die einzelnen Mühlen natürlich kleiner (40 hoch und 8 Pixel breit).

function windmuehle1

   	function windmuehle1 (cv, xpos, ypos){
		cv.fillStyle = "rgb(0,0,200)";
		cv.beginPath();
		cv.moveTo( xpos, ypos);
		cv.lineTo( xpos+8, ypos);
		cv.lineTo( xpos+8, ypos-40);
		cv.lineTo(xpos, ypos-40);
		cv.fill();

		cv.strokeStyle= "rgb(0,200,0)";
		cv.lineWidth=2;

		cv.beginPath();
		cv.moveTo( xpos+4, ypos-36);
		cv.lineTo( xpos+4+20, ypos-36+20);
		cv.moveTo( xpos+4, ypos-36);
		cv.lineTo( xpos+4+20, ypos-36-20);
		cv.moveTo( xpos+4, ypos-36);
		cv.lineTo( xpos+4-20, ypos-36+20);
		cv.moveTo( xpos+4, ypos-36);
		cv.lineTo( xpos+4-20, ypos-36-20);
		cv.stroke();
		cv.lineWidth=1;
      }

	function zeichne(){
	var canvas2 = document.getElementById('Canvas2');
	if (canvas2.getContext){
		  var bild2 = canvas2.getContext('2d');
		  for (var i=1; i<10; i++){
		    windmuehle1(bild2,50*i-30, 100-5*i);
		    windmuehle1(bild2,50*i-30, 200-5*i);
		    windmuehle1(bild2,50*i-30, 300-5*i);
		  }

		}
	}

Aufgabe 1

Zeichne eine andere einfache Figur auf kariertes Papier. (Auto, Haus, ...)
Schreibe eine entsprechende "function".
Lasse mehrere Figuren an unterschiedlichen Stellen zeichnen.

Beispiel 2

Den Quelltext für das Beispiel nebenan finden Sie unter

canvasStempeln2.html

unterschiedliche Größe

Es sieht schöner aus, wenn die gezeichneten Gegenstände unterschiedliche Größe haben können. Die Methode "windmuehle2" hat dafür einen weiteren Parameter, die "hoehe".

function windmuehle2 (cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe){ ... }

Bei dieser Gelegenheit schaffen wir zusätzlich die Möglichkeit, die Farben von Gehäusewand und Flüglen zu ändern.
Wie geht das nun mit der variablen Höhe? Bei der Mühle im Koordinatensystem ist die Höhe 100; das ist besonders einfach umzurechnen, denn wir müssen jetzt alle Längen als Anteile der Höhe angeben (Prozent, aber als Bruch). Weil die Längen alle Vielfache von 10 sind, setzen wir zur weiteren Vereinfachung die Hilfsvariable d auf den Wert "hoehe/10". Die Breite der Wand ist dann "2*d" (eigentlich 2*hoehe/10, also 2/10 = 20% der Höhe). Entsprechen kann man 10 durch "d", 60 durch "6*d", ... ersetzen - ALLE Zahlen ersetzen, denn alle Abmessungen müssen gleichzeitig kleiner bzw. größer werden.

function windmuehle2

	function windmuehle2 (cv, xpos, ypos, hoehe, wandfarbe, fluegelfarbe){
		cv.save();
		cv.fillStyle = wandfarbe;
		var d = hoehe/10;
		cv.beginPath();
		cv.moveTo( xpos, ypos);
		cv.lineTo( xpos+2*d, ypos);
		cv.lineTo( xpos+2*d, ypos-hoehe);
		cv.lineTo(xpos, ypos-hoehe);
		cv.fill();

		cv.strokeStyle= fluegelfarbe;
		cv.lineWidth=2;
		cv.beginPath();
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d+5*d, ypos-hoehe+d+5*d);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d+5*d, ypos-hoehe+d-5*d);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d-5*d, ypos-hoehe+d+5*d);
		cv.moveTo( xpos+d, ypos-hoehe+d);
		cv.lineTo( xpos+d-5*d, ypos-hoehe+d-5*d);
		cv.stroke();
		cv.restore()
	}
	function zeichne(){
	var canvas2 = document.getElementById('Canvas2');
	if (canvas2.getContext){
		  var bild2 = canvas2.getContext('2d');
		  for (var i=1; i < 10; i++){
		    windmuehle2(bild2,(80-3*i)*i-50, 300-25*i,80-7*i,
                       'rgb(' + Math.floor(255-20*i) + ',' + Math.floor(255-20*i) + ',0)',
                       'rgb(0,0,' + Math.floor(255-20*i) + ')');
		  }
		  windmuehle2(bild2,40, 120,70, "blue","red");
		}
	}

save()
restore()

In der "function windmuehle2" werden fillStyle, strokeStyle und lineWidth verändert.

Wenn man in einem funktionierenden Programm (Zeichnung) zusätzlich noch eine Windmühle zeichnen lassen will und deshalb irgendwo "windmuehle2(...)" einfügt, kann es sein, dass die Teile der Zeichung, die nach dem Aufruf von "windmuehle2( )" stehen, verändert sind und jetzt z.B. die Farbe der Windmühle tragen. Man nennt so etwas einen (unbeabsichtigten) Seiteneffekt.

Deshalb speichert man mit "save" den aktuellen Zustand der Leinwand, bevor man Veränderungen vornimmt. Am Ende kann man dann mit "restore" den vorherigen Zustand wiederherstellen.

Aufgabe 2

Schreibe für Deine Figur aus Aufgabe 1 eine "function" mit Parametern xpos, ypos und einer Größenangabe
Teste mit verschiedenen Werten für die Größe.
Lasse wieder mehrere Figuren an unterschiedlichen Stellen zeichnen.

Canvas - Grundlagen Seitenanfang Bewegte Bilder (Animationen)