HTML/Multimedia und Grafiken/Canvas

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das canvas Element stellt Scripten eine bitmap-basierte Leinwand zur Verfügung, die dann es ermöglicht, einfach und schnell Grafiken und Diagramme zu zeichnen, Bilder anzuordnen, Animationen zu erstellen und vieles mehr. Ursprünglich ist es nur eine leere Hülle, die erst durch die Canvas 2d API oder durch WebGL gefüllt wird.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
  • HTML5

Folgende Attribute sind nötig:

  • id: damit das JavaScript-Script das richtige canvas-Element anspricht
  • height: Höhe (Standardwert ist 150px)
  • width: Breite (Standardwert ist 300px)
Empfehlung: Notieren Sie eigene Maße direkt als HTML-Attribut und nicht über CSS, damit die Standardeinstellungen der Browser überschrieben werden!


Beispiel
  <canvas>
    <p>Leider unterstützt Ihr Browser die Anzeige von canvas-Elementen nicht.</p>
    <p>Diese Grafik zeigt ein ...</p>
  </canvas>
In diesem Beispiel wird ein Canvas-Element auf den Bildschirm gezeichnet. Kontur und Hintergrund dieses Elements, nicht jedoch die gezeichnete Fläche, lassen sich wie gewohnt mit CSS formatieren.
Beachten Sie:
Fehlt der End-Tag des canvas-Elements, wird der Rest des HTML-Dokuments als Fallback betrachtet und nicht angezeigt.

Inhaltsverzeichnis

[Bearbeiten] zugängliche Alternativtexte

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 Sie über Kindelemente des canvas-Elements zugängliche Alternativtexte 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.

[Bearbeiten] Anwendungsbeispiel

Beispiel
<!doctype html>
<html>
  <head>
    <title>Canvas-Tutorial</title>
    <script>
       /* JavaScript zum Zeichnen des Inhaltes */
    </script>
   </head>
  <body>
    <canvas>
       Leider unterstützt Ihr Browser die Anzeige von canvas-Elementen nicht.
       Dieses Beispiel zeigt ...
    </canvas>
  </body>
</html>
In diesem Beispiel wird ein Canvas-Element auf den Bildschirm gezeichnet. Kontur und Hintergrund dieses Elements, nicht jedoch die gezeichnete Fläche, lassen sich wie gewohnt mit CSS formatieren.


[Bearbeiten] Siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML