Canvas (HTML-Element)
Ein Canvas-Element (vom englischen canvas für „Leinwand“ oder „Gemälde“) ist ein – in der Sprache HTML – mit Höhen- und Breiten-Angaben beschriebener Bereich, in den per JavaScript gezeichnet werden kann. Ursprünglich von der Firma Apple als Bestandteil des WebKit entwickelt, ist es später von der Arbeitsgruppe WHATWG als Bestandteil der Auszeichnungssprache HTML5 standardisiert worden.
Fähigkeiten
Neben normalen Linien- und Rechteckszeichenfunktionen ermöglicht Canvas unter anderem das Zeichnen von:
- Kreisbögen
- Bézierkurven (quadratisch und kubisch)
- Farbverläufen
- Grafiken (Formate: PNG, GIF, JPEG), die skaliert, positioniert und beschnitten werden können
- Transparenz (mit mehreren Abstufungen)
- Text
Objekte und Objektgruppen können verschoben, rotiert und skaliert werden.
Wie bei OpenGL und DirectX auch können Objekte in einem Stack abgelegt werden, was die gezielte Manipulation von Objektgruppen ermöglicht. Animationen sind mittels Verwendung von JavaScript-Zeitfunktionen möglich.
Die Ausgabe von Vektorgrafik wird nicht unterstützt.
Unterstützung
Canvas wird nativ (also ohne Plug-Ins) von den aktuellen Versionen der Browser Internet Explorer, Firefox, Opera, Apple Safari und Chrome unterstützt.
Alte Versionen des Internet Explorers, die heutzutage noch immer weit verbreitet sind, bieten keine Unterstützung für Canvas, da sie veröffentlicht wurden, bevor das Canvas-Element standardisiert wurde.
Hier ist eine genaue Übersicht des Canvas-Supports der beliebtesten Browser (beinhaltet die letzten 4 Veröffentlichungen):[1]
| Internet Explorer | Mozilla Firefox | Apple Safari | Google Chrome | Opera | iOS Safari | Opera Mobile | Android Browser |
|---|---|---|---|---|---|---|---|
| 6.0 | 3.6 | 3.2 | 14.0 | 11.0 | 3.2 | 10.0 | 2.2 |
| 7.0 | 9.0 | 4.0 | 15.0 | 11.1 | 4.0 - 4.1 | 11.0 | 2.3 |
| 8.0 | 10.0 | 5.0 | 16.0 | 11.5 | 4.2 - 4.3 | 11.1 | 3.0 |
| 9.0 | 14.0 | 6.0 | 21.0 | 12.0 | 5.0 - 5.1 | 11.5 | 4.0 |
| 10.0 | 29.0 | 7.0 | 34.0 | 22.0 | 6.0 - 6.1 | 11.5 | 4.2-4.3 |
| 11.0 | 30.0 | 7.0 | 35.0 | 22.0 | 7.0 | 11.5 | 4.4 |
Die alten Versionen des Internet Explorers können jedoch mit Plugins, welche von Mozilla und Google zur Verfügung gestellt werden, um die Canvas-Funktion erweitert werden.[2][3]
Siehe auch
Weblinks
- Offizielle Canvas-Beschreibung (englisch)
- Einführung in Canvas
- Ausführliches Canvas-Tutorial bei Mozilla.org (englisch)
- canvas.quaese.de – Dokumentation, Einleitungen mit Beispielen, weiterführende Links
Einzelnachweise
- ↑ Compatibility tables for support of HTML5, CSS3, SVG. Abgerufen am 28. März 2012.
- ↑ "Mozilla drags IE into the future with Canvas element plugin". Ars Technica, abgerufen am 27. Juli 2011.
- ↑ "ExplorerCanvas". Sourceforge, abgerufen am 29. November 2011.