Canvas I
Aus ProgrammingWiki
Das ProgrammingWiki unterstützt einige Canvas Befehle. Ein Canvas ist eine rechteckige Leinwand, auf die wir mittels Javascript zeichnen können.
Beispiel
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 Muster 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.
___ ___ ___ ___ ___
Aufgabe 7
Programmieren Sie ein Treppenmuster ungefähr so wie in dieser Skizze. Die Linien sollen jeweils 40px lang sein.
__ |__ |__ |__ |__