Übung JavaScript Shape Poly Canvas

Ausbildung Internet Web Kurse Kurs Javascript Programmierung Kurs JavaScript ES6 Programmierung - Ressourcen Kurs JavaScript ES6 Programmierung - Übungen OO Bildungsweg Frage zum Kurs

Übung JavaScript Shape Poly Canvas

Ausgangslage

Top
Ausgangslage
Vorgehen
Lösung
Bottom

Diese Übung basiert auf der Übung Shape Canvas. Neu sollen alle Shapes in einem Shape Array über die Funktion initShapes() initialisiert werden. Danach zeichnen wir die Shapes über die Funktion drawShapes(canvas).

Das folgende Script zeigt das neue HTML Canvas auf:

<!DOCTYPE html>
<html>
    <head>
        <title>Shape Poly Canvas</title>
        <script src="Shape.js"></script>
        <script src="Rectangle.js"></script>
        <script src="Oval.js"></script>
        <script>
            let shapes = [];
            function initShapes() {
               // TODO
            }
            function drawShapes(canvas) {
               // TODO
            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="400" style="background: #0000ff;">
        Your browser does not support the HTML5 canvas tag.</canvas>
        <script>
            let myCanvas = document.getElementById('myCanvas');
            initShapes();
            drawShapes(myCanvas);
        </script>
    </body>        
</html>

Das Resultat der Anzeige soll gleich bleiben:

Vorgehen

Lösen Sie bitte die Aufgabe wie folgt:

Passen Sie die HTML Datei gemäss dem obigen Script an.
Programmieren Sie die Funktion initShapes() aus.
Programmieren Sie die Funktion drawShapes(canvas) aus.
Testen Sie das Resultat via Run -> Chrome Browser.
Ergänzen Sie die Klasse Shape mit den folgenden Methoden:
```
getArea() {
  return 0.0;
}
draw(canvas) { throw 'not supported'; }
```
Diese Anpassung ist für die Lösung nicht notwendig aber kann die Subklassen entlasten.

Lösung

Eine mögliche Lösung finden Sie hier