Canvas
Die HTML5 Canvas API ist eine Programmierschnittstelle, mit der du Grafiken direkt im Browser zeichnen kannst. Du verwendest dazu das canvas-Element in HTML und zeichnest mit JavaScript Linien, Formen, Texte, Bilder oder Animationen. Anders als in SVG sind dies Rastergrafiken.
- Formen und Pfade
- Stile und Farben (Füllungen, Linien und Schatten)
- Bilder
- Text
- Transformationen
- Pixel Manipulation
- Animation
- Hit Regions
Inhaltsverzeichnis
Zeichnungen und Animationen erstellen
Die Implementierung der Canvas-Zeichenoberfläche ähnelt der GUI (Graphics User Interface) von Microsoft Windows und lässt sich formal in folgende Schritte aufteilen:
- Jedes Mal, wenn der Inhalt der Canvas neu gezeichnet werden soll, muss eine zu diesem Zweck entworfene Funktion manuell entweder innerhalb einer anderen Funktion oder durch einen Event-Handler wie z. B.
load
,DOMContentLoaded
oderclick
aufgerufen werden.Beachte, dass anderenfalls kein Inhalt in das canvas-Element gezeichnet wird; es wird keine Funktion von selbst aufgerufen, weder beim Laden der Seite noch sonst irgendwann. - Innerhalb der Funktion muss zu Beginn ein sogenanntes Context-Objekt angefordert werden. Dieses Objekt fungiert als eine Schnittstelle und stellt Funktionen zum Zeichnen von Linien, Rechtecken, Kreisen, Bögen, Texten, Bildern, ... bereit. Dabei hängt der konkrete Umfang an Funktionen und deren Benennung vom Typ des Context-Objekts ab. So gibt es zum Beispiel ein Context-Objekt zur Zeichnung von zweidimensionalen Figuren als auch eines für das Arbeiten mit 3D-Objekten. Die nachfolgenden Artikel beschränken sich jedoch lediglich auf das 2D-Context-Objekt vom Typ 2d, alle vorgestellten Funktionen und Membervariablen beziehen sich auf diesen Kontext.
- Als Erstes sollte die Oberfläche der Canvas mithilfe einer dementsprechenden Context-Funktion geleert werden. Dies verhindert, dass nach dem Zeichnen noch Überreste des Vorgängerinhalts zu sehen sind.
- Nun kann die eigentliche Zeichenarbeit beginnen. Dabei sollte darauf geachtet werden, dass eventuelle Farbangaben, zum Beispiel die Füll- oder Rahmenfarbe eines Rechtecks, den eigentlichen Zeichenfunktionen nicht als Argument übergeben, sondern in zentralen Membervariablen abgespeichert und dann bei Bedarf durch diese Funktionen ausgelesen werden. Dies bedeutet, dass vor dem Aufrufen derartiger Funktionen unter Umständen die jeweiligen Membervariablen auf den gewünschten Wert gesetzt werden müssen, um das entsprechende Resultat zu erhalten.
function drawCanvas() {
var element = document.getElementById('mycanvas');
if(element.getContext)
{
var context = element.getContext('2d');
}
}
In diesem Beispiel wird die JavaScript-Funktion drawCanvas
deklariert, deren Aufgabe es ist, den Zeichenbereich des Elements mycanvas
mit Inhalt zu füllen. Hierzu wird zuerst das Canvas-Objekt mithilfe dieser ID ermittelt und in der Variable element
gespeichert. Danach wird mittels if(element.getContext)
geprüft, ob das Canvas-Objekt eine Membervariable mit dem Namen getContext
besitzt. Ist dies der Fall, so handelt es sich um einen Canvas-fähigen Browser und die eigentliche Programmierung kann beginnen.
Dazu wird die eben geprüfte Eigenschaft getContext
(es handelt sich dabei um ein function-Objekt) mit dem Argument 2d
aufgerufen und der von ihr zurückgegebene Wert in der Variable context
abgespeichert. Die Funktion getContext
erstellt dabei ein Context-Objekt, dessen Typ durch den ersten Parameter spezifiziert wird, in unserem Beispiel ist er also 2d
.
Neben diesem Typ existiert außerdem noch webgl
, sein Context-Objekt stellt Funktionen zum Erstellen, Darstellen und Arbeiten mit 3D-Objekten zur Verfügung. Außerdem kann die Funktion auch noch weitere Argumente erhalten, sie hängen vom Typ des Context-Objekts ab und werden bei 2d
nicht benötigt. Nachdem das Context-Objekt ermittelt wurde, kann die eigentliche Zeichenarbeit (Schritte 3 und 4) begonnen werden.
Zugänglichkeit
In HTML5 canvas wird Text gezeichnet, d. h. als Grafik und nicht als Text dargestellt. Dies ist natürlich eine Katastrophe für die Zugänglichkeit und sollte deshalb nur in Ausnahmefällen erfolgen. Alternativ sollten man zugängliche Alternativtexte über Kindelemente des canvas-Elements zur Verfügung stellen.
Ähnlich wie beim noscript
-Element kann zwischen den beiden Tags HTML-Code notiert werden, der vom Browser angezeigt wird, falls dieser canvas-Elemente nicht unterstützt. Dies sollte aber nicht nur eine Fehleranzeige sein, dass canvas nicht unterstützt wird, sondern eine Beschreibung der nicht zu sehenden Grafik, Beschriftung oder Animation.
Diese Lösung hat(te) allerdings den Nachteil, dass die Alternativinhalte nicht mit dem canvas
direkt verbunden sind. So können Events, die mit Bereichen des Canvas verbunden sind, nicht an den Fallback-Inhalt gehängt werden. Mit der addHitRegion()
-Methode können solche Bereiche jetzt für beide Darstellungsformen verwendet werden. Mit der drawFocusIfNeeded(element)
-Methode können diese Bereiche auch für eine Tastaturansteuerung fokussiert werden.
- W3C: Canvas Accessibility - Past, Present and Future
- Creativebloq: What the canvas element means for accessibility
- html5accessibility.com
Siehe auch
Weblinks
- WHATWG: canvas-Element
- W3C: HTML Canvas 2D Context
- MDN: CanvasRenderingContext2D
Artikel:
- Webkrauts: Malen nach Zahlen
- simon.html5: HTML5 Canvas Cheat Sheet
Demos: