Einführung in die Canvas-Programmierung

Aufgabe 1: Rechteck zeichnen

Implementieren Sie zunächst das "Rechteck zeichnen"-Beispiel aus der Vorlesung. Sie sollten ein Fenster mit dem Inhalt von Abb. 1 sehen.

Aufgabe 2: 3D-Kreise für das Anaglyphenverfahren

Implementieren Sie mit Hilfe einer Schleife eine Menge roter (#FF0000) und grüner oder türkiser (#00DCF0) konzentrischer Kreise mit Strichstärke 2 Pixel.

Der größte Kreis besitzt jeweils den Radius 100 Pixel. Der Radialabstand der Kreise innerhalb einer Gruppe beträgt 10 Pixel. Der Abstand der beiden Kreisgruppen in Abb. 2 beträgt 45 Pixel.

Wenn Sie die Kreise mit einer passend getönten 3D-Brille betrachten, so sollten diese zu schwarz-weißen Kreisen verschmelzen, die mehr oder weniger weit vor dem Monitor schweben. Der Abstand zum Monitor hängt ab vom gewähltem Horizontalabstand zwischen den beiden Kreisgruppen.

Der Abstand der schwebenden Kreise zum Monitor und das Eintreten des 3D-Effekts kann über die Horizontaldifferenz der beiden Kreisgruppen gesteuert werden.

Aufgabe 3: Farbverläufe

Implementieren Sie die Beispiele zu den Farbverläufen aus der Vorlesung.

Aufgabe 4: Vier Kreise

Stellen Sie ungefähr in der Mitte Ihres Canvas einen Kreis dar und arrangieren Sie um diesen herum drei weitere, farbig gefüllte Kreise mit einem Radius von 50 Pixel und einem schwarzem Rand der Breite 4 Pixel, die den inneren Kreis leicht berühren. Füllen Sie anschließend den inneren Kreis mit einem Farbverlauf, bestehend aus den Farben rot, blau und gelb ähnlich zu Abb. 3. In Abb. 3 sind die Farben im Verlauf gleichmäßig verteilt.

Die Kreise in der Abb. 4 besitzen einen Winkelabstand von 120°. Für die Anordnung der Kreise in dieser Form ist es hilfreich mit trigonometrischen Funktionen zu arbeiten.

Kreisränder und Kreisfüllungen müssen getrennt gezeichnet werden.

Aufgabe 5: Rechteckprototyp

Definieren Sie mit Hilfe einer Konstruktorfunktion einen parametrierbaren Prototyp für Canvas-Rechtecke:

function Rectangle(x, y, width, height, lineWidth, color, fill)

Dieser besitze die folgenden Parameter:

• x, y: Position der linken oberen Ecke
• width, height: Ausdehnung in Pixel in horizontaler und vertikaler Richtung
• lineWidth: Randstärke in Pixel
• color: Farbe des Randes oder der Füllung
• fill: Boolscher Wert, der angibt, ob das Rechteck gefüllt oder ungefüllt zu zeichnen ist. Bei einem gefüllten Rechteck legt der Parameter color die Farbe der Füllung fest. Der Rand wird schwarz gezeichnet. Bei einem nicht gefüllten Rechteck legt der Parameter color die Farbe des Randes fest.

Der Prototyp verfüge über die folgenden Methoden:

1. this.draw = function(context){...}: Mit Hilfe der Methode draw kann das Rechteck in einem 2D-Canvas-Kontext mit dem Namen  context mit den Methoden strokeRect bzw. fillRect gezeichnet werden.
2. this.move = function(xnew,ynew){...}: Die Methode move definiert für das Rechteck eine neue Position (xnew, ynew), ohne das Rechteck an dieser auch zu zeichnen.

Schreiben Sie ein kurzes Hauptprogramm, in dem zwei Rechtecke der Größe 100x50 Pixel erzeugt und mit einem Abstand von 100 Pixel untereinander mit draw() dargestellt werden. Das erste Rechteck besitzt eine rote Füllung und einen schwarzen Rand der Stärke 2 Pixel. Das zweite Rechteck ist nicht gefüllt und besitzt einen roten Rand der Stärke 2 Pixel. Definieren Sie danach für das zweite Rechteck mit move() eine neue, um 100 Pixel nach unten verschobene Position und stellen Sie es erneut im Browserfenster mit draw() dar. Siehe Abb. 4.

Aufgabe 6: Komposition

Implementieren Sie mit Hilfe des Canvas einen Prototyp für ungefüllte und gefüllte Dreiecke.

1. Definieren Sie hierzu eine Konstruktorfunktion Triangle:

   function Triangle(size, filled, color)
   

   Die Funktion besitzt die folgenden Parameter:

   • size: Bestimmt die Größe des Dreiecks, entsprechend zu Abb. 5 in Pixel.

   • filled: Legt fest, ob das Dreieck gefüllt oder leer zu zeichnen ist.

   • color: Legt bei einem zu füllenden Dreieck die Farbe fest, mit der das Dreieck zu füllen ist, und sonst die Randfarbe.
     Die Randfarbe eines gefüllten Dreiecks ist immer schwarz.

2. Ergänzen Sie die Konstruktorfunktion um die Methode

   this.draw = function(x, y, context)
   

   die das Dreieck in einem grafischen 2D-Canvas-Kontext mit dem Namen context an der Position (x, y) entsprechend zu den Angaben in Abb. 5 zeichnet.

   
   

3. Erzeugen Sie in Ihrem Programm zwei neue Triangle-Objekte: ein ungefülltes mit einem roten Rand und ein rot gefülltes, siehe Abb. 6. Die Dreiecke im Beispiel besitzen eine Größe von 50 Pixel und die Strichbreite 2.

   

4. Erstellen Sie nun mit Hilfe von Komposition eine Konstruktorfunktion Arrow zur Darstellung von Pfeilen.

   function Arrow (size, length, filled, color)

   Neben dem size-Parameter, für die Definition der Pfeilgröße, besitzt diese den Parameter length, mit dem die Länge des Pfeilschaftes festgelegt wird, siehe Abb.7:

   
   

   Im ungefüllten Fall besitzt der Pfeilschaft die Farbe des Dreiecks. Im gefüllten Fall ist er schwarz. Um Codeduplikation zu vermeiden, wird in der Konstruktorfunktion von Arrow ein Triangle-Objekt verwendet.

5. Ergänzen Sie die Konstruktorfunktion um die Methode

   this.draw = function(x, y, context)
   

   die den Pfeil im grafischen Kontext context an der Position (x, y) zeichnet und dafür die draw-Methode von Triangle nutzt.

5. Erzeugen Sie danach, wie in Abb. 8 dargestellt, zwei neue Pfeilobjekte - für den ungefüllten und den gefüllten Fall - und stellen Sie diese in Ihrem Programm dar (z. B. mit length = 100 Pixel, size = 50 Pixel).