Brückenkurs Websites und Webapps/Canvas I

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.

<canvas></canvas>

'''Beispiel'''

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 Muster ungefähr so wie in dieser Skizze. Die Linien sollen jeweils 40px lang sein.
 ___   ___   ___   ___   ___   ___   ___   ___   ___   ___
 
<code id="58cf09eacb810"></code>
<run id="58cf09eacba5b"></run>



'''Aufgabe 6'''

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



'''Aufgabe 7'''

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>