PMG1719/GL 2

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
Das ProgrammingWiki unterstützt einige [[Canvas_Befehle | Canvas Befehle]]. Ein Canvas ist eine rechteckige Leinwand, auf die wir mittels Javascript zeichnen können.



== Beispiele ==


{| border="0"
 |-
 | '''Fahne''' || '''Pfeil Länge 100, 45° 20 Schritte, Turtle zum Pfeilanfang setzten || 
 |-
 | [[Bild:Koehler_Turtle1_fahne.jpg]]<canvas></canvas>  || [[Bild:Koehler_Turtle1_pfeil.jpg]]<canvas></canvas>  || 
 |-
 | <run id="5a9abaff5767d"> var c = new Canvas(1); 
c.clear(); // Zeichenfläche löschen 
var t = new Turtle(1); // neuer Turtle auf Zeichenfläche 1 
t.home(); </run>|| 

<run id="5a9abaff576fb">var c = new Canvas(2);
c.clear(); // Zeichenfläche löschen
var t = new Turtle(2); // neuer Turtle auf Zeichenfläche 2
t.home(); </run>
|}



{| border="0"
 |-
 | '''Quadratturm: 100, 75,50'''  || '''Nikolaushaus: Seitelänge 50''' || 
 |-
 | [[Bild:Koehler_Turtle1_quadrat.jpg]] <canvas></canvas>  ||  [[Bild:Koehler_Turtle1_nikolaus.jpg]]] <canvas></canvas>  || 
 |-
 | <run id="5a9abc406614c"> var c = new Canvas(3); 
c.clear(); // Zeichenfläche löschen 
var t = new Turtle(3); // neuer Turtle auf Zeichenfläche 3 
t.home(); </run>|| 

<run id="5a9abc40661ef">var c = new Canvas(4);
c.clear(); // Zeichenfläche löschen
var t = new Turtle(4); // neuer Turtle auf Zeichenfläche 4
t.home(); </run>
|}



Wir zeichnen eine Linie vom Punkt x=0,y=0 (linke obere Ecke des Canvas) zum Punkt x=50,y=50:
<code id="58cf090da8fbf">
function draw(){

  canvas.clear();
  canvas.line(0,0,50,50);
}
</code>
<run id="58cf090da90f9">
draw();
</run>


Wir zeichnen eine Linie vom Punkt x=5,y=0 (oberer Rand des Canvas) zum Punkt x=5,y=200 (unterer Rand des Canvas):
<code id="58cf090da902d">
function draw(){

  canvas.clear();
  canvas.line(5,0,5,200);
}
</code>
<run id="58cf090da915f">
draw();
</run>


Wir zeichnen ein Liniengitter, bei dem die Abstände zwischen den Linien 10px betragen.
<code id="58cf090da908d">
function draw_lines(){
  
  canvas.clear();

  for(var x = 5; x <= 600; x = x + 10){
     
    canvas.line(x, 0, x, 200);
   
  }
}
</code>
<run id="58cf090da91c5">
draw_lines();
</run>


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.
<code id="58cf09eacb5e6"></code>
<run id="58cf09eacb89a"></run>



'''Aufgabe 2'''

Zeichnen Sie eine einzelne Linie, die vom Punkt x=0,y=100 bis zum Punkt x=600,y=100 verläuft.
<code id="58cf09eacb65e"></code>
<run id="58cf09eacb90b"></run>



'''Aufgabe 3'''

Programmieren Sie ein Liniengitter, bei dem die Linien horizontal verlaufen. Die Abstände zwischen den Linien sollen 10px betragen. 
<code id="58cfcc2199e3b"></code>
<run id="58cfcc2199f1b"></run>



'''Aufgabe 4'''

Kombinieren Sie das horizontale und das vertikale Liniengitter, um ein Karomuster zu erzeugen. Verwenden Sie 2 for-Schleifen nacheinander. 
<code id="58cf09eacb722"></code>
<run id="58cf09eacb978"></run>



'''Aufgabe 5'''

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

 __
   |__
      |__
         |__
            |__
     
<code id="58cf09eacb7a1"></code>
<run id="58cf09eacb9eb"></run>



'''Aufgabe 6'''

Programmieren Sie ein Muster ungefähr so wie in dieser Skizze. Die Linien sollen jeweils 40px lang sein.
 ___   ___   ___   ___   ___   ___   ___   ___   ___   ___
 
<code id="58cf09eacb810"></code>
<run id="58cf09eacba5b"></run>