Canvas Tutorial

<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