Übung JavaScript Rectangle Canvas Method

Ausgangslage

Diese Übung basiert auf der Übung RectangleCanvas. Das Resultat bleibt gleich, es soll aber neu die Fläche angezeigt werden:

Die Rectangle Klasse soll sich mit der Methode draw() selber zeichnen. Hierzu soll die Klasse die Farbe und via Boolean Flag das Rechteck mit Rand oder Filled zeichnen.Das folgende UML Diagramm zeigt dies auf:

Die Methode draw(canvas) wird mit dem Canvas parametrisiert. Intern prüft die Methode das Fill-Flag und zeichnet das Rechteck in der gewünschten Farbe.

Links über dem Rechteck ist die Fläche (Area) anzuzeigen. Solche soll über die Methode getArea() berechnet werden.

Eine Referenz zum Zeichnen mit Canvas finden Sie unter https://www.w3schools.com/tags/ref_canvas.asp

Vorgehen

Lösen Sie bitte die Aufgabe wie folgt:

1. Erweitern Sie die Klasse Rectangle in der Datei Rectangle.js mit den Attributen color und fill.
2. Passen Sie die bestehende index.html Lösung so an, dass sich jedes Rechteck selber zeichnet.

   Das folgende Listing zeigt das HTML JavaScript:

   let myCanvas = document.getElementById('myCanvas');
   let r1 = new Rectangle(20, 20, 100, 200, '#FF0000');
   r1.draw(myCanvas);
   let r2 = new Rectangle(140, 120, 200, 100, '#FFFF00', true);
   r2.draw(myCanvas);

3. Testen Sie das Resultat via Run -> Chrome Browser.

Lösung

Eine mögliche Lösung finden Sie hier