GL 2

Aus ProgrammingWiki

Archivierte Version vom 2018-03-03T15:49:36+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.

Beispiele

Fahne	'''Pfeil Länge 100, 45° 20 Schritte, Turtle zum Pfeilanfang setzten

var c = new Canvas(1); c.clear(); // Zeichenfläche löschen var t = new Turtle(1); // neuer Turtle auf Zeichenfläche 1 t.home();	var c = new Canvas(2); c.clear(); // Zeichenfläche löschen var t = new Turtle(2); // neuer Turtle auf Zeichenfläche 2 t.home();

Quadratturm: 100, 75,50	Nikolaushaus: Seitelänge 50

var c = new Canvas(3); c.clear(); // Zeichenfläche löschen var t = new Turtle(3); // neuer Turtle auf Zeichenfläche 3 t.home();	var c = new Canvas(4); c.clear(); // Zeichenfläche löschen var t = new Turtle(4); // neuer Turtle auf Zeichenfläche 4 t.home();

Wir zeichnen eine Linie vom Punkt x=0,y=0
(linke obere Ecke des Canvas) zum Punkt x=50,y=50:

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

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

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

draw();

var c = new Canvas(5);
c.clear(); // Zeichenfläche löschen
var t = new Turtle(5); // neuer Turtle auf Zeichenfläche 5
t.home();

|| uu

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.

GL 2

Beispiele

Suche