<canvas> ("Leinwand") ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.
Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).
Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.
Vorbereitung
Das <canvas>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".
In diesem Tutorial
- Grundlagen
- Formen zeichnen
- Bilder
- Stile und Farben verwenden
- Transformations
- Compositing
- Basic animations
- Optimizing the canvas
Siehe auch
- Canvas topic page
- Drawing Graphics with Canvas
- Canvas examples
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing and Animation Application
- Interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials
- W3C Standard
- HTML5 Canvas tutorials and reference