Canvas – eine weitere Alternative für den Anwendungsfall der grafischen Darstellung mit JavaScript

23. April 2018

Canvas ist ein HTML Element und beschreibt eine Pixel Zeichenfläche, die in einer Webseite eingebaut werden kann. Ursprünglich entwickelte die Firma Apple dieses Element für WebKit, um skriptbasierte Minianwendungen für den Safari zu erstellen.

Der heutige Stand ist, dass Canvas mit HTML5 eingeführt wurde und von fast allen Browsern unterstützt wird. Außer alle älteren Version vor dem Internet Explorer 9.0. Das Problem des IE ist das Erkennen des Kontextes und wie der Inhalt gezeichnet werden soll. Eine Möglichkeit ist eine Kompatibilität zu erstellen. Der Befehl wird in den html head-Bereich gesetzt.

<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge" />

Diese Methode ist aber unter Vorbehalt zu verwenden.

Die Daten werden in Form von Diagrammen und Animationen grafisch dargestellt. Anhand einer JavaScript API kann die Zeichenfläche als Zeichenprogramm bis hin zur Darstellung von Spielinhalten manipuliert werden. Woraus sich ein breites Anwendungsgebiet ergibt von der Bildbearbeitung und Spiele über interaktive und grafische Benutzungskonzepte bis hin zur Datenvisualisierung und vielem mehr.

Die ersten Schritte

Die Zeichenfläche wird über den <canvas> Tag eingebunden und über die Attribute width und height spannt sich die Zeichenfläche auf. Die Attribute müssen im HTML Code gesetzt werden, weil die CSS-Angaben die vorhandene Ausdehnung skaliert und damit die Darstellung verzerrt. Zusätzlich empfehle ich eine ID zusetzten, um besser auf den Canvas zuzugreifen.

<canvas id="meinCanvas" width="800" height="400">
</canvas>

Jetzt kann mit Hilfe von JavaScript in der Canvas gezeichnet werden. Wir referenzieren den Canvas in eine Variable und geben den Kontext an. Entweder wird der Inhalt als 2d oder 3d Darstellung in den Canvas gezeichnet

var canvas = document.getElementById('meinCanvas');
var ctx = canvas.getContext('2d');

Eine Auswahl einiger Fähigkeiten

Die Farbfüllung mit ihren Zeichen- und Füllstilen, wie Strichdicke oder -färbung oder -struktur sowie der Verlauf, können vor jeden Zeichnen gesetzt werden, falls nicht wird der Stil, der davor gesetzt wurde, übernommen. Beim Zeichnen von Formen, wie Rechtecke oder Kreisbögen oder Bézierkurven (quadratisch und kubisch), sollte darauf geachtet werden, das vor dem Zeichnen neu begonnen wird, weil der letzte gesetzte Punkt der Referenzpunkt für das nächste Zeichnen ist. Mit der Funktion beginPath()  wird das zum einem getan und es nimmt alle vorige Formen, die noch nicht mit stroke() oder fill() auf den Bildschirm gebracht wurden, aus dem Speicher.

Des Weiteren ist zu beachten, dass die Formen nicht automatisch gezeichnet werden, weil jeder Zeichenvorgang Rechenzeit benötigt. Deswegen wird das Zeichnen direkt und explizit angewiesen. Die Funktion stroke() zeichnet den Rand und fill() zeichnet nur die Füllung. 

Codebeispiel eines gefüllten Rechteckes:

ctx.beginPath();  Beginn des Zeichnen des Path
ctx.lineWidth=5;  Strichdicke 5px
ctx.fillStyle="#FF0000";  Füllfarbe
ctx.strokeStyle='#cba';  Strichfärbung
ctx.rect(300,300,100,50);  x-pos, y-pos, width, height
ctx.fill();  Rechteck füllen
ctx.stroke();  Rechteck Rand zeichnen

 


Abbildung 1 gefülltes Rechteck

Bei Linien zeichnen wird der Start-  und Endpunkt gesetzt und bei Kurven kommt ein Stützpunkt hinzu, der die Richtung des weiteren Zeichenverlaufes beschreibt.  Zum Bestimmen von Kreisen werden Kreisbögen genutzt und über die Funktion acr( X-Position, Y-Position, Radius, Startwinkel, Endwinkel, Richtung ) beschrieben. Die Winkel werden grundsätzlich in Radians angegeben, d.h., der volle Kreisumfang ist 2*Pi. Der Parameter  für die Richtung kann true (Gegen den UZS) oder false (im UZS, default) sein. Über den Link könnt ihr einen weiteren Funktionsüberblick erlangen. 

Eine weitere spannende Fähigkeit ist die Animation

Die Animation findet über die Zeitsetzung statt. Wir zeichnen ein Objekt und bauen darum eine If Anweisung mit immer wieder leicht veränderten Objektparameter. Mein Hinweis, dafür sollte der Canvas immer wieder vor dem neuen Zeichnen geleert werden, sonst entstehen Artefakte. 

<!doctype html>
<html>
  <head>
    <title>Canvas</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge" />
    <style type="text/css">
      #meinCanvas {
        position:relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #888;
      }
      #preloader {
        display: none;
      }
    </style>
    <script type="text/javascript">
      var c;
      var ctx;
      var logos = [];

      window.onload = function(){
        c = document.querySelector ( '#meinCanvas' );
        ctx = c.getContext ( '2d' );
         
        for ( var i = 0; i < 300; i++ ){
          logos.push ( {
            posx: Math.random() * (c.width + 100) - 100,
            posy: Math.random() * (c.height + 100) - 100,
            vy: Math.random() * 4 + 4,
            size: Math.random() * 0.5 + 0.5
          } );
        }
         
        setInterval ( zeichne, 30 );
      }
       
      function zeichne(){
         
        ctx.clearRect ( 0, 0, c.width, c.height );
         
        var bild = document.querySelector ( '#bss-logo' );         
         
        for ( var i = 0; i < logos.length; i++ ){
         
          ctx.drawImage ( 
            bild, logos[i].posx, logos[i].posy, 
            100 * logos[i].size, 100 * logos[i].size
          );
         
          logos[i].posy += logos[i].vy;
         
          if ( logos[i].posy > c.height ){             
            logos[i].posy = -100;
          }
        }
      }
    </script>
  </head>   
  <body>
    <canvas id="meinCanvas" width="600" height="400"></canvas>
    <div id="preloader">
      <img id="bss-logo" src="bss_logo_100px_rgb.png">
    </div>
  </body>
</html>

 

 

Canvas und d3.js für komplexe Graphenvisualisierung

Canvas biete die Zeichenfläche und die Fähigkeiten Formen zu zeichnen und das Framework d3.js biete eine dynamische und interaktive Datenvisualisierung. In der Abbildung werden 3149 Knoten mit Canvas mit dem d3.js abgebildet.


Abbildung 2 Canvas Force-Directed Graph [http://bl.ocks.org/kenpenn/3a236adf6f44c27f2d4f773ea1f43330]

Result

Ich bin in diesem Beitrag nur ganz kurz auf die Basics von Canvas eingegangen und habe gezeigt, wie mit einfachen geometrischen Elementen etwas sehr komplexes, wie eine Datenvisualisierung, entstehen kann. Um noch auf mehr Möglichkeiten mit Canvas und der Datenvisualisierung einzugehen und vielleicht mit einen Vergleich von SVG und Canvas abzuschließen, würde es jetzt den Beitrag sprengen.

 

Neuen Kommentar schreiben