Rechteck-Berechnung mit Javascript + Canvas

(Javascript + Live-Pixel-Grafik)


Amateur-Version


Merkmale

Die Programmierung folgt dem auf einer anderen Seite detailliert vorgestellten Beispiel der → Javascript-Amateur-Lösung.
Hier wird lediglich mit minimalem Aufwand eine Grafik des berechneten Rechtecks gemalt.



Die Grafik wird als <canvas>-Element eingefügt. Dieses Element ist seit der Version → HTML‑5 verfügbar. Man kann darin mit Javascript-Programmen Pixel-Grafik herstellen. Das Canvas-Element wird im Beispiel zum besseren Verständnis strichliert umrandet.

Details und Beispiele zum Thema → Canvas



Das Programm berechnen() wird bei jeder Änderung der Vorgabe-Daten ausgeführt. Damit werden die Vorgaben gelesen, die Ausgabe-Daten berechnet, im Ausgabe-Formular angezeigt und die Grafik gezeichnet. Die Teil-Aufgaben werden zur besseren Übersicht von eigenen Programmen ausgeführt:

function berechnen() {
daten_lesen();
daten_berechnen();
daten_schreiben();
daten_malen();
}


Besonderer Wert wurde auf diese Eigenschaften gelegt:


function daten_malen() {
var img = document.getElementById('image').getContext('2d');
img.clearRect(0,0,400,250);
img.fillStyle = '#CFF';
img.fillRect(0,250-b,a,b);
img.strokeStyle='#00F';
img.strokeRect(0,250-b,a,b);
}


Die Methoden fillRect() und strokeRect() erwarten folgende 4 Argumente (jeweils in Bildpunkten = Pixeln):
X-Koordinate des Startpunkts, Y-Koordinate des Startpunkts, Breite, Höhe.
In der Informatik liegt der Koordinaten-Ursprung einer Grafik ohne besondere Vereinbarung stets in der linken obenen Ecke.
Die Y-Koordinaten werden von oben nach unten (!) gemessen.
Als Höhe der Canvas-Grafik ist 250px vorgegeben.
Daher wird als Startpunkt des Rechtecks nicht (0,0) verwendet sondern (0,250-b). Von dort ausgehend wird das Rechteck nach rechts und unten gemalt.


Anregungen für ambitionierte EntwicklerInnen:
Ändern sie das Javascript-Programm so, dass die Größe des Canvas-Elements als globale Variable vorgegeben wird.
Beschriften sie die Seiten a,b der Grafik

Profi-Version


Das Ziel dieses Beispiels ist, einige typische Unterschiede zwischen der korrekten, aber einfachen Lösung einer Aufgabe und einem professionellen Programm zu zeigen.


Entwicklung

Das Programm ist so kurz und einfach wie möglich.
Es werden wieder-verwendbare Elemente (Objekte, Methoden, Funktionen, ...) überall verwendet, wo das sinnvoll ist.
Hier wird z.B. das Javascript-Objekt Rectangle (→ Quelltext) zur Verwaltung und Berechnung der Eigenschaften verwendet.
Das Programm wird so angelegt, dass man es bei Weiter-Entwicklung der verwendeten Resourcen (z.B. neue Versionen von Objekten, Funktionen, ...) nicht ändern muss.
Die verwendeten Methoden und Funktionen werden besonders sorgfältig gegen alle denkbaren Fehler und Sonderfälle abgesichert.


Hinweise

Das gezeigte Beispiel kombiniert die auf einer anderen Seite vorgestellten Beispiele → Objekt-orientierte Lösung und → Eingabe mit Schieberegler mit → Canvas Pixel-Grafik.

Die gestellte Aufgabe wird mit dieser Version gut gelöst.
Die Grafik (Rechteck) ist allerdings nach ihrem Character eine Objekt-Grafik und wird daher noch besser mit → SVG an Stellle von Canvas dargestellt.