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>
|}

{| border="0"
 |-
 | Wir zeichnen eine Linie vom Punkt x=0,y=0 <br>(linke obere Ecke des Canvas) zum Punkt x=50,y=50: || Wir zeichnen eine Linie vom Punkt x=5,y=0 <br> oberer Rand des Canvas) zum Punkt x=5,y=200 (unterer Rand des Canvas): || Wir zeichnen ein Liniengitter, bei dem die Abstände <br>zwischen den Linien 10px betragen.
 |-
 |  <canvas></canvas>  ||   <canvas></canvas>  || <canvas></canvas>
 |-
 | <code id="5a9abec2c866b">
function draw(){
  var c = new Canvas(5);
 c.clear(); // Zeichenfläche löschen
 var t = new Turtle(5); // neuer Turtle auf Zeichenfläche 5
  c.line(0,0,50,50);
}
</code>
<run id="5a9abec2c8716">
draw();
</run> || 
<run id="5a9abc40661ef">var c = new Canvas(5);
c.clear(); // Zeichenfläche löschen
var t = new Turtle(5); // neuer Turtle auf Zeichenfläche 5
t.home(); </run> || uu
|}





<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.