GL 2

Das ProgrammingWiki unterstützt einige Canvas Befehle. Ein Canvas ist eine rechteckige Leinwand, auf die wir mittels Javascript zeichnen können.

Beispiele

Fahne	'''Pfeil Länge 100, 45° 20 Schritte, Turtle zum Pfeilanfang setzten
Ihr Browser unterstützt Canvas nicht.	Ihr Browser unterstützt Canvas nicht.
var c = new Canvas(1); c.clear(); // Zeichenfläche löschen var t = new Turtle(1); // neuer Turtle auf Zeichenfläche 1 t.home();ausführen	var c = new Canvas(2); c.clear(); // Zeichenfläche löschen var t = new Turtle(2); // neuer Turtle auf Zeichenfläche 2 t.home();ausführen

Wir zeichnen eine Linie vom Punkt x=0,y=0 (linke obere Ecke des Canvas) zum Punkt x=50,y=50:

Wir zeichnen eine Linie vom Punkt x=5,y=0 (oberer Rand des Canvas) zum Punkt x=5,y=200 (unterer Rand des Canvas):

Wir zeichnen ein Liniengitter, bei dem die Abstände zwischen den Linien 10px betragen.

Der Aufruf "canvas.clear" sollte am Anfang jeder Funktion stehen, um die Leinwand zu löschen.

Aufgabe 1

Programmieren Sie das oben gezeigte Liniengitter. Die Abstände zwischen den Linien sollen aber 100px betragen.

Aufgabe 2

Zeichnen Sie eine einzelne Linie, die vom Punkt x=0,y=100 bis zum Punkt x=600,y=100 verläuft.

Aufgabe 3

Programmieren Sie ein Liniengitter, bei dem die Linien horizontal verlaufen. Die Abstände zwischen den Linien sollen 10px betragen.

Aufgabe 4

Kombinieren Sie das horizontale und das vertikale Liniengitter, um ein Karomuster zu erzeugen. Verwenden Sie 2 for-Schleifen nacheinander.

Aufgabe 5

Programmieren Sie ein Treppenmuster ungefähr so wie in dieser Skizze. Die Linien sollen jeweils 40px lang sein.

__
  |__
     |__
        |__
           |__
    

Aufgabe 6

Programmieren Sie ein Muster ungefähr so wie in dieser Skizze. Die Linien sollen jeweils 40px lang sein.

___   ___   ___   ___   ___   ___   ___   ___   ___   ___