CanvasGI - Skelettprogramm

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:

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>
         

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: