CSS, HTML und Javascript mit {stil}

Javascript API für HTML Canvas

Javascript für HTML Canvas

HTML Canvas mit seinen Javascript-Funktionen ist neben SVG einer der beiden designierten Nachfolger von Adobe Flash im Web und in Web-Applications.

Das HTML-Canvas-Element ist erst einmal nur eine leere Box. Erst Javascript füllt den Canvas mit Formen, Farben und Verläufen und animiert den Inhalt.

Ein Canvas ist ein Bitmap-Raster. Die Zeichnung auf dem Canvas ist kein Teil des DOM und kann keine klickbaren Bereiche enthalten (keine Links oder Maps, keine Positionsangaben). Bilder in einem Canvas können nicht wie SVG-Grafiken vergrößert und verkleinert werden.

Wozu also eine weitere Technik für Grafik, wo wir schon SVG haben?

Das Canvas-API besticht durch seine hohe Performance, da es sich die einzelnen Elemente der Zeichnung nicht merken muss. Javascript für Canvas ist Hardware-beschleunigt und vor allem für schnelle Animationen und Spiele bestimmt. Die einzelnen Frames oder die Pixel eines im Canvas erzeugten Bildes lassen sich als PNG-Bild speichern.

<canvas id="myCanvas" width="600" height="200"> </canvas>

Javascript canvas ist auch Bestandteil von ePub3, dem Standard für eBooks.

Canvas Attribute und Funktionen

Javascript kann die HTML-Attribute des canvas-Tags programmatisch ändern – nicht anders als bei jedem HTML-Element. Das canvas-Tag ist Teil des DOMs – nicht aber sein Inhalt. Der Inhalt des canvas-Tags besteht aus Pixeln.

Attribute/FunktionenBeschreibung
widthBreite des canvas in Pixeln (default: 300)
heightHöhe des canvas in Pixeln (default: 150)
toDataURL(type)Wandelt den Inhalt des canvas in ein statisches Bild um (image/png ist der Standard, den jeder Browser unterstützen muss)
getContext(ctxID)Der Zeichen-Kontext des canvas-Elements

Anwendungen von Javascript canvas sind wahre Monster an Code: Ganz schön viel Arbeit.

Eine Javascript-Library für canvas vereinfacht die Programmierung: calebevans.me/projects/jcanvas

KineticJS ist ein Framework, das die Programmierung von Bewegung, Übergänge, Ebenen, Filter und Ereignissen vereinfacht.

Canvas und Context

Javascript greift in drei Schritten auf den canvas zu:

  1. Einen Verweis auf das canvas-Element erzeugen
    var canvas = document.getElementById('canvas');
  2. Den Zeichen-Zustand oder context setzen
    var ctx = canvas.getContext("2d");
  3. Ein Element (Form, Pfad, …) zeichnen
var canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
   var ctx = canvas.getContext("2d");
   if (ctx) {
      ctx.fillStyle = "#9FC0D0";
      ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
                    ^         ^                 ^
                    |         |                 |
                    |         |                 Höhe der Füllung
                    |         Breite der Füllung
                    Ursprung des Canvas
    }
}
Aufbau den CANVAS mit Nullpunkt und Koordinatensystem
Bevor Javascript die canvas-Fläche füllt, ist ein canvas schwarz und transparent.

Canvas kennt keinerlei Objekte – Javascript sieht den Inhalt eines Canvas nur als eine Serie von Pixeln.

Canvas Context

Jeder Context enthält einen Zustand – den Kontext der Zeichenfläche.

Eigenschaften des contextBeschreibung
fillStyleStil der Füllung: CSS-Farbe, Verlauf (Gradient), Muster (Pattern)
strokeStyleStil der Kontur: CSS-Farbe, Verlauf (Gradient), Muster (Pattern)
lineWidthBreite der Kontur (default: 1)

Der Zustand kann vom Script gespeichert und später wieder aktiviert werden: So entsteht eine History oder ein Protokoll des Zeichnungszustands. Die Zustände können in einem Stack gespeichert und später wieder abgerufen werden.

Der Drawing State verwaltet Eigenschaften des Canvas:

  • aktueller Wert von lineWidth, strokeStyle, fillStyle, lineCap usw.
  • aktuelle Transformations-Matrix
  • aktueller Clipping-Bereich
RectanglesLinesArcsPath
Colors/StylesBézier CurvesQuadratic CurvesText
CompositingPatternsGradientsShadows
Clipping Paths
TransformsImagesVideoRaw Pixels

Drawing State ist keine History oder Protokoll, wie wir es z.B. von Photoshop kennen.

Der Drawing State konserviert nicht die Zeichnung, sondern Breite und Farbe von Konturen und die Füllung von Objekten!

Javascript context.save() und context.restore() speichern einen Zeichen-Zustand bzw. aktivieren einen älteren Zustand, um den Zeichnungszustand wieder herzustellen.

Dieser Browser kann den Inhalt des CANAVS nicht darstellen.
sctx.strokeStyle = "darkblue";
sctx.fillStyle = "lightblue";
sctx.lineWidth = 10;
			
sctx.fillRect (25,25,100,125);
sctx.strokeRect (25,25,100,125); // Erstes Viereck gezeichnet
sctx.save();

Nachdem das erste Viereck gezeichnet ist, speichert sctx.save(); den Zustand von von strokeStyle, fillStyle und lineWidth (Blautöne). Der Button Weiter definiert einen neuen Zeichenzustand:

sctx.strokeStyle = "darkred";
sctx.fillStyle = "lightred";
sctx.lineWidth = 4;
sctx.fillRect(175,25,100,125);
sctx.strokeRect(175,25,100,125);

Neue Elemente bekommen die aktuellen Einstellung von strokeStyle, fillStyle und lineWidth (Rottöne).

Der Button Restore stellt den Zeichen-Context auf den Zustand beim Aufruf von save() zurück.

Wird ein weiteres Objekt gezeichnet, gilt wieder der initiale Zustand von strokeStyle, fillStyle und lineWidth (Blautöne und Breite der Kontur 10).

CANVAS yx0,0width, height