Canvas II

Aus ProgrammingWiki

Archivierte Version vom 2017-03-26T11:57:37+00:00. Aktuelle Version

Inhaltsverzeichnis

1 Einführung
2 Rechtecke
3 Kreise
4 Farben

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

Aufgabe1

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

Aufgabe 2

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

Aufgabe 3

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

Aufgabe 4

Verwenden Sie eine for-Schleife, um folgendes Muster zu erzeugen (bitte ignorieren Sie die horizontale Linie):

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

Farben

Mit der Eigenschaft strokeStyle können wir die Linienfarbe ändern:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
 
   ctx.strokeStyle = 'hsl(100, 80%, 40%)';
   ctx.rect(10,10,480,480);

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

draw();

Der Farbwert ist wie folgt aufgebaut:

hsl(hue, saturation, lightness) = hsl(farbe, sättigung, helligkeit)

Es gilt:

0 \leq hue \leq 360 (360 aufeinanderfolgende Regenbogenfarben aus dem Farbkreis)
0\% \leq saturation \leq 100\%
0\% \leq lightness \leq 100\%

Beachten Sie außerdem, dass der Farbwert ein String, d.h. eine Zeichenkette ist!

Interessante Effekte werden möglich, wenn wir den Farbwert in eine Variable auslagern:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,500,500);
   ctx.beginPath();
 
   var farbwert = 0;
   ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
   ctx.rect(10,10,480,480);
   ctx.stroke();
   ctx.closePath();

   farbwert = farbwert + 100;
   ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
   ctx.rect(20,20,460,460);
   ctx.stroke();
   ctx.closePath();

   farbwert = farbwert + 100;
   ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
   ctx.rect(30,30,440,440);

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

draw();

Das Beispiel zeichnet drei Rechtecke mit drei verschiedenen Farben aus dem Farbkreis. Beachten Sie, dass die Farbe nur geändert werden kann, wenn zuvor die Anweisungen stroke() und closePath ausgeführt worden sind!

Aufgabe 5

Wiederholen Sie Augabe 2. Die Rechtecke sollen nun in Regenbogenfarben gezeichnet werden.

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

Aufgabe 6

Wiederholen Sie Augabe 4. Die Kreise sollen nun in Regenbogenfarben gezeichnet werden.

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

Zusatzaufgabe Wiederholen Sie Aufgabe 2 oder Aufgabe 4. Die Liniendicke der Rechtecke bzw. Kreise soll sich schrittweise ändern. https://www.w3schools.com/tags/canvas_linewidth.asp

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

Canvas II

Inhaltsverzeichnis

Einführung

Rechtecke

Kreise

Farben

Suche