Canvas und Canvas-Interface
Das HTML-Canvas-Tag kreiert nur eine Zeichenfläche, damit bekommt man jedoch Zugriff über einen "Drawing context" auf ein mächtiges "Application Interface" via JavaScript. Das CanvasGI ("Graphics Interface to Canvas") legt noch einmal eine Schale um diesen "Drawing context". Die nachfolgend beschriebene Skelett-Seite enthält nur die Anweisungen, die für den Einstieg erforderlich sind.
<body onLoad="init();">
<div align="center">
<canvas id="canvas" width="200" height="150">
</canvas>
</div>
</body>
|
Der "Body" der HTML-Seite c_skelett.html ist nebenstehend zu sehen. Mit dem <canvas>-Tag wird der Zeichenbereich mit den Abmessungen 200x150 Pixel in der Seitenmitte platziert. Er hat hier den (beliebig zu wählenden) Identifikator id="canvas", mit dem er aus den JavaScript-Funktionen angesprochen werden kann.
Das <canvas>-Tag im Body-Bereich erzeugt keine sichtbare Fläche. Beim Laden der Seite wird die Funktion "init()" aufgerufen (über onload im Body-Tag). In dieser Funktion können nun ein "Drawing context" erzeugt und Zeichenaktionen ausgeführt werden. Dies ist in der Seite c_skelett.html im Head-Bereich untergebracht:
<script language="javascript" type="text/javascript"
src="http://www.TM-Mathe.de/CanvasGI/CanvasGI.js"></script>
<!-- ... bindet das CanvasGI-Interface ein -->
<script type="text/javascript">
function init() {
var gi = new canvasGI ("canvas") ; // Ein "CanvasGI-Objekt" wird erzeugt
gi.clearcanvas ("silver" , "black") ; // ... fuellt Canvas-Bereich mit Hintergrundfarbe
} // ("silver") und zeichnet schwarzen Rahmen
</script>
Die Funktion "init()" erledigt die gesamte Aktion:
- Mit new canvasGI wird ein CanvasGI-Objekt erzeugt und der variablen gi zugewiesen. Dem Konstruktor wird dabei der Identifikator des Canvas-Tags übergeben ("canvas"), so dass ein "Drawing context" zur Zeichenfläche erzeugt werden kann. Der Quelltext des CanvasGI-Interfaces befindet sich wie alle dazu gehörenden Variablen (Eigenschaften) und Funktionen (Methoden) in der Datei CanvasGI.js, die hier über die URL http://www.TM-Mathe.de/CanvasGI/CanvasGI.js bereitgestellt wird.
- Über das Objekt gi hat man nun Zugang zu allen Funktionen des CanvasGI-Interfaces. Dies wird hier nur am Beispiel des Aufrufs von clearcanvas demonstriert. Diese Funktion löscht alle in der Zeichenfläche vorhandenen Zeichenelemente (hier natürlich nicht erforderlich, weil es noch gar keine gibt), kann aber (wie hier) mit zwei Parametern aufgerufen werden und führt dann zwei Aktionen aus: Füllen der Zeichenfläche mit der Farbe "silver" und Zeichnen eines Rahmens mit der Farbe "black".
Die komplette HTML-Datei c_skelett.html kann in einem neuen Browser-Fenster ausgeführt werden und erzeugt die nebenstehend zu sehende Ansicht der Zeichenfläche.
CanvasGI-Funktionen und/oder Canvas-Funktionen?
Mit dem Erzeugen eines CanvasGI-Objekts hat man Zugriff auf alle in diesem Interface verfügbaren Funktionen. Eine Zusammenstellung findet man auf der Seite "CanvasGI - Beschreibung der verfügbaren Funktionen".
Es besteht aber auch die Möglichkeit, die "normalen Canvas-Funktionen" zu verwenden und gegebenenfalls mit den CanvasGI-Funktionen zu mischen. Dafür muss nur der von CanvasGI erzeugte "Drawing context" mit der Funktion getcontext beschafft werden, mit dem dann der Zugang zu allen Canvas-Funktionen ermöglicht wird. Das ist natürlich nicht der eigentliche Sinn bei der Verwendung von CanvasGI und sollte sich auf die Fälle beschränken, für die CanvasGI keine eigene Funktion anbietet.
Nachfolgend sieht man einen Ausschnitt aus der Erweiterung der oben beschriebenen Datei. In der Funktion init() wurde das Zeichnen zweier gefüllter Rechtecke ergänzt, einmal mit den CanvasGI-Funktionen und danach mit den normalen Canvas-Funktionen:
<script type="text/javascript">
function init() {
var gi = new canvasGI ("canvas") ; // Ein "CanvasGI-Objekt" wird erzeugt
gi.clearcanvas ("silver" , "black") ; // ... fuellt Canvas-Bereich mit Hintergrundfarbe
// ("silver") und zeichnet schwarzen Rahmen
gi.fillstyle ("blue") ; // ... zeichnet ein blaues Rechteck
gi.vdrawfrect (30 , 20 , 140 , 40) ; // mit CanvasGI-Funktionen
var context = gi.getcontext () ; // ... holt den von CanvasGI erzeugten "Drawing context",
context.fillStyle = "#F00" ; // ... zeichnet ein rotes Rechteck
context.fillRect (40 , 100 , 120 , 30) ; // mit der "normalen" Canvas-Funktion
}
</script>
- Nach dem Erzeugen des CanvasGI-Objekts gi und dem Füllen des Canvas-Bereichs mit Hintergrundfarbe werden in den hellblauen Zeilen die beiden CanvasGI-Funktionen fillstyle und vdrawfrect aufgerufen, die ein blaues Rechteck zeichnen (der Definition der Farben ist eine eigene Seite "Farben in CanvasGI" gewidmet).
- In der grünen Zeile wird mit dem Funktions-Aufruf gi.getcontext der beim Erzeugen des Objekts gi kreierte "Drawing context" abgefordert und der Variablen context zugewiesen. Mit dem Objekt context können nun die "normalen Canvas-Funktionen" aufgerufen werden (weiße Zeilen), mit denen hier ein rotes Rechteck gezeichnet wird.
Die komplette HTML-Datei c_skelettplus.html kann in einem neuen Browser-Fenster ausgeführt werden und erzeugt die nebenstehend zu sehende Ansicht der Zeichenfläche.
Weiterlesen
Folgende Seiten werden als Einführung in die Benutzung des CanvasGI empfohlen:
- Empfehlung zum Weiterlesen: Viewports und Clipping,
- Farben in CanvasGI,
- Problembezogene Koordinatensysteme ("User coordinates"), isotrope und anisotrope Skalierung.
