Das HTML-5-Element "Canvas"
Das HTML-Element "Canvas" definiert einen rechteckigen Bereich, in dem grafische Darstellungen angezeigt werden können. Der Bereich kann an beliebiger Stelle der Seite eingefügt werden und muss neben einem Identifikator nur zwei Attribute definieren (Höhe und Breite des Rechtecks), zum Beispiel so:
<canvas id="mycanvas" width="350" heigth="300"></canvas>
| Rotation ändern: | 
|
|
|
Die nebenstehend zu sehende Grafik befindet sich in einem <canvas>-Tag, das genau wie das oben gegebene Beispiel programmiert ist (die Animation arbeitet mit CanvasGI-Funktionen, Realisierung wird auf der Seite "Mehrere 3D-Flächenmodelle zeichnen und animieren" detailliert beschrieben). Weil das Bild erst im Browser entsteht, sind Benutzer-Aktionen möglich: Klicken auf die kleinen Symbole unterhalb des Bildes ändert die Rotation.
Besonders flexibel ist die Canvas-Grafik durch ihre Beschreibung in einer Scriptsprache (JavaScript). Es steht ein Satz von Funktionen zur Verfügung, mit denen in den Canvas-Bereich gezeichnet werden kann. Man findet im Internet zahlreiche ausführliche Dokumentationen aller Funktionen und Tutorials, die sehr gut in die Anwendung einführen.
Browser-Akzeptanz: Alle modernen Browser akzeptieren die Canvas-Grafik seit vielen Generationen (Mozilla, Chrome, Safari, Opera, Android, ...), der Internet-Explorer von Microsoft allerdings erst ab Version 9, und mit diesem gibt es noch das zusätzliche Problem, dass diese Version nicht für das noch weit verbreitete Windows XP verfügbar ist. Kurzfassung dieser Aussage: Alle modernen Browser akzeptieren Canvas-Grafik, der Internet-Explorer aber erst ab Version 9 ab Betriebssystem-Version Windows Vista.
Warum ein Interface zu den Canvas-Funktionen?
Die für das Erzeugen von grafischen Darstellungen verfügbaren Canvas-Funktionen beschränken sich (wie bei allen Grafik-Systemen) auf die erforderliche Basis-Funktionalität. Es steht zum Beispiel nur ein Koordinatensystem für Geräte-Koordinaten (Pixel) mit Ursprung in der linken oberen Ecke zur Verfügung, das allerdings mit recht komfortablen Transformations-Funktionen flexibel genutzt werden kann.
CanvasGI
... ist ein Interface, das einen Satz von JavaScript-Funktionen bereitstellt, die auf den Canvas-Funktionen aufsetzen. Dem Benutzer bieten sie folgende Vorteile:
|
| Canvas wurde in 3 Viewports unterteilt, links wird isotrop skaliert (Bahnkurve), die Diagramme rechts werden anisotrop dargestellt |
Es können eigene Koordinaten definiert werden, die von CanvasGI auf die Gerätekoordinaten der Canvas-Funktionen umgerechnet werden. Verfügbar sind:
- "Viewport coordinates" sind Gerätekoordinaten, für die der Nullpunkt und die Koordinatenrichtungen beliebig festgelegt werden dürfen.
- "User coordinates" sind beliebig zu definierende 2D-Koordinaten, die isotrop (in beiden Richtungen gleich) oder anisotrop skaliert werden.
- "World coordinates" sind 3D-Koordinaten, die für die Darstellung in der 2D-Zeichenfläche einstellbaren Projektionsvorschriften unterworfen werden.
Es werden verschiedene Varianten angeboten, wie 3D-Objekte unter Beachtung der Sichtbarkeit von Kanten und Flächen dargestellt werden können. Hier findet man eine Übersicht über die behandelten 3D-Probleme.
Die Möglichkeit, absolute oder relative Transformationen zu definieren (2D und 3D), erleichtert besonders das Erzeugen von Animationen.
Für typische wiederkehrende Zeichenaktionen (zum Beispiel das Zeichnen und Beschriften von Koordinatenachsen, "Zoom and Move"-Aktionen, ...) werden Hilfs-Funktionen bereitgestellt.
Weiterlesen
Die "Einführung in die Benutzung von CanvasGI" kann wie ein Tutorial gelesen werden, in dem die einzelnen Funktionen in sinnvoller Reihenfolge vorgestellt werden. Am unteren Ende jeder Seite wird deshalb die Empfehlung zum Weiterlesen gegeben. Einige Seiten behandeln die theoretischen Grundlagen (zum Beispiel für die Transformation und die Projektion), die man überspringen kann, wenn man nur an der Realisierung der grafischen Ausgabe interessiert ist.
Natürlich kann man auch über das Menüangebot oben zu beliebigen interessierenden Themen springen, und wer zuerst einmal sehen möchte, was mit CanvasGI möglich ist, kann sich über den Menüpunkt "Beispiel-Seiten öffnen" die Seiten ansehen, deren Herstellung im Tutorial beschrieben werden.
