Canvas II

Aus ProgrammingWiki

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

ausführen

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

ausführen

Aufgabe1

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

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

ausführen

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

ausführen

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

ausführen

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

ausführen

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

ausführen

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

ausführen

Der Farbwert ist wie folgt aufgebaut:

hsl(hue, saturation, lightness), zu deutsch: 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.beginPath(); ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)'; ctx.rect(10,10,480,480); ctx.stroke(); ctx.closePath(); farbwert = farbwert + 100; ctx.beginPath(); ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)'; ctx.rect(20,20,460,460); ctx.stroke(); ctx.closePath(); farbwert = farbwert + 100; ctx.beginPath(); ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)'; ctx.rect(30,30,440,440); ctx.stroke(); ctx.closePath(); }

draw();

ausführen

Das Beispiel zeichnet drei Rechtecke mit drei verschiedenen Farben aus dem Farbkreis. Beachten Sie, dass jetzt in jedem Schritt die Anweisungen beginPath, stroke und closePath wiederholt werden müssen!

Aufgabe 5

Wiederholen Sie Augabe 2. Die Rechtecke sollen nun in Regenbogenfarben gezeichnet werden, ungefähr so:

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

ausführen

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

ausführen

Zusatzaufgabe Wiederholen Sie Aufgabe 2 oder Aufgabe 4. Die Liniendicke der Rechtecke bzw. Kreise soll sich schrittweise ändern. Informationen über Canvas lineWidth

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

ausführen