Grundlagen Canvas

Das `<canvas>` Element

Beginnen wir mit dem <canvas> Element:

<canvas id="tutorial" width="150" height="150"></canvas>

Das <canvas> Element hat nur zwei Attribute - width und height. Wenn diese Attribute nicht gesetzt sind bekommt das canvas eine Breite von 300px und eine Höhe von 150px. Die Maße des canvas kann auch über CSS gesetzt sein, sollte aber nicht, weil es dann während dem Rendern auf die CSS Maße gestreckt wird.

Hinweis: Wenn das Ergebnis des Renderings verzerrt wirkt, stelle sicher, dass nicht über CSS die Maße festgelegt worden sind.

Das id Attribut ist eines der globalen Attribute in HTML, welche auf alle HTML Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine id zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.

Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS Eigenschaften auf das <canvas> Element anwenden (margin, border, background etc). Diese CSS Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei SVG)

Fallback

Einige ältere Browser unterstützen das <canvas> Elementnicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das <canvas> Element nicht unterstützen. Browser, die das <canvas> Element unterstützen zeigen diesen Fallback nicht.

Beispiele:

<canvas id="stockGraph" width="150" height="150">
  aktueller Wechselkurs: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

Benötigter `</canvas>` Tag

Im Unterschied zu dem <img> Element, benötigt das <canvas> Element den Endtag (</canvas>).

Wenn kein Fallback definiert wird, reicht ein <canvas id="foo" ...></canvas> völlig aus.

Der Kontext

<canvas> stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standartkontext ist der 2D Kontext. Es gibt noch WebGL (3D context) basierend auf OpenGL ES.

Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das <canvas> Element hat eine Methode getContext(), mit der der Kontext definiert wird. getContext() benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D Grafiken ist dieser String "2d".

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

Die erste Zeile speichert in der Variable canvas den DOM Knoten unseres canvas mithilfe der document.getElementById() Methode. Danach wird die getContext() Methode aufgerufen , um den Kontext in der Variable ctx speichern.

Browserkompatibilität prüfen

Nicht nur der Fallback kann die Browserrkompatibilität prüfen. Auch mit JavaScript ist dies möglich in dem die Existens der getContext() Methode überprüft wird. Beispiel:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  //weiterer Code
} else {
  alert("Dein Browser unterstützt das <canvas> Element nicht")
}

HTML-Struktur

Eine einfache HTML-Struktur reciht für unser Tutorial ersteinmal völlig aus.

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if(canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

Das Script enthält eine Funktion draw(), welche nach dem onload Event ausgeführt wird.

Einfaches Beispiel

Im einfachen Beispiel werden zwei Rectecke gezeichnet, eins mit Transparenz.

<!DOCTYPE html>
<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if(canvas.getContext){
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect(30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Demo:

Screenshot	Live sample

« zurück weiter »