Canvas II

Aus ProgrammingWiki

Archivierte Version vom 2017-03-26T11:21:16+00:00. Aktuelle Version

Einführung

In diesem Arbeitsblatt wollen wir den vollen Funktionsumfang der Canvas-Bibliothek nutzen. Im Vergleich zum letzten Canvas-Arbeitsblatt ist dazu etwas mehr Code notwendig.

Beispiel

Wir zeichnen eine vertikale Linie von x=10,y=0 bis x=10, y=500:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
   
   ctx.moveTo(10,0);
   ctx.lineTo(10,500);

   ctx.stroke();
   ctx.closePath();
}

draw();

Wichtig: Die Zeilen 3-6 und 11-12 müssen Sie bei jeder Aufgabe in diesem Arbeitsblatt einfügen!

Referenz aller Canvas-Funktionen und -Einstellungen

Rechtecke

Mit der Canvas-Funktion rect können wir Rechtecke zeichnen.

Aufbau: rect(x, y, breite, höhe)

Beispiel

Wir zeichnen ein Rechteck an die Postion x=10,y=10:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
   
   ctx.rect(10,10,480,480);

   ctx.stroke();
   ctx.closePath();
}

draw();

Aufgaben

Der folgende Code zeichnet ein Rechteck mit den Abmessungen 480x480 an die Position x=0,y=0.

Ergänzen Sie ein zweites Rechteck mit den Abmessungen 460x460 an die Position x=20,y=20!
Ergänzen Sie ein drittes Rechteck mit den Abmessungen 440x440 an die Position x=30,y=30!

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
   
   ctx.rect(10,10,480,480);

   ctx.stroke();
   ctx.closePath();
}

draw();

Verwenden Sie eine for-Schleife, um Rechtecke zu zeichnen, die folgendes Muster ergeben:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
 


   ctx.stroke();
   ctx.closePath();
}

draw();

Kreise

Mit der Canvas-Funktion arc können wir Kreise zeichnen.

Aufbau: arc(x, y, radius, startwinkel, endwinkel)

Für Kreise gilt: startwinkel=0 und endwinkel=2*Math.PI

Beispiel

Wir zeichnen einen Kreis mit dem Radius 10px an die Position x=250,y=250:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
 
   ctx.arc(250,250,10,0,2*Math.PI);

   ctx.stroke();
   ctx.closePath();
}

draw();

Aufgaben

Folgender Code zeichnet einen Kreis mit dem Radius 10px an die Position x=250,y=250.

Ergänzen Sie einen zweiten Kreis mit dem Radius 20px an die gleiche Position.
Ergänzen Sie einen dritten Kreis mit dem Radius 30px an die gleiche Position.

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
 
   ctx.arc(250,250,10,0,2*Math.PI);

   ctx.stroke();
   ctx.closePath();
}

draw();

Canvas II

Einführung

Rechtecke

Kreise

Suche