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=50,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:
<code id="58cf090da908d">
function draw_lines(){
  
  canvas.clear();

  for(var x = 5; x <= 500; 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''

Programmieren Sie folgendes Muster:
<code id="58cf09eacb5e6"></code>
<run id="58cf09eacb89a"></run>



'''Aufgabe''

Programmieren Sie folgendes Muster:
<code id="58cf09eacb65e"></code>
<run id="58cf09eacb90b"></run>



'''Aufgabe''

Programmieren Sie folgendes Muster:
<code id="58cf09eacb722"></code>
<run id="58cf09eacb978"></run>



'''Aufgabe''

Programmieren Sie folgendes Muster:
<code id="58cf09eacb7a1"></code>
<run id="58cf09eacb9eb"></run>



'''Aufgabe''

Programmieren Sie folgendes Muster:
<code id="58cf09eacb810"></code>
<run id="58cf09eacba5b"></run>