Canvas I

Aus ProgrammingWiki

Archivierte Version vom 2017-03-19T23:34:00+00:00. Aktuelle Version

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:

function draw(){

  canvas.clear();
  canvas.line(0,0,50,50);
}

draw();

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

function draw(){

  canvas.clear();
  canvas.line(5,0,5,200);
}

draw();

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

function draw_lines(){
  
  canvas.clear();

  for(var x = 5; x <= 600; x = x + 10){
     
    canvas.line(x, 0, x, 200);
   
  }
}

draw_lines();

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

Programmieren Sie eine 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

Programmieren Sie ein Treppenmuster ungefähr so wie in dieser Skizze:

____
    |
    |
    |____
         |
         |
         |____
              |
              |
              |_____

Aufgabe 5

Programmieren Sie ein Muster ungefähr so wie in dieser Skizze:

____    ____    ____    ____    ____    ____    ____    ____    ____