HTML/Elemente/canvas
Aus SELFHTML-Wiki
Das canvas-Element stellt eine Zeichenfläche zur Verfügung, in der mit Hilfe von JavaScript Grafiken gezeichnet, Animationen erstellt und vieles mehr pixelbasiert gezeichnet werden kann. Browser, die das canvas-Element nicht unterstützen, zeigen statt dessen den Inhalt des Elements als Fallback an.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- WAI‑ARIA‑Rolle
-
- keine
- Elternelemente
- Darf vorkommen in:
- allen Elementen mit flow content
- allen Elementen mit phrasing content
- erlaubte Inhalte
-
- alle in den Eltern-Elementen erlaubten Inhalte
Transparenz (transparent content)
- alle in den Eltern-Elementen erlaubten Inhalte
Beispiel
<canvas>
<p>Ihr Browser unterstützt die Anzeige von canvas-Elementen nicht.</p>
<p>Diese Grafik zeigt ein …</p>
</canvas>
Beachten Sie: Fehlt der End-Tag des canvas-Elements, versucht der Browser - wie bei allen anderen Elementen auch - die HTML Struktur bestmöglich zu deuten. Die Folge ist, dass das nach canvas folgende HTML zum Teil oder sogar vollständig als Inhalt des canvas-Elements betrachtet wird und damit nur im Fallback-Fall gezeigt wird.
Empfehlung: Die Maße sollten als Attribute und nicht über CSS angegeben werden.
Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
Universalattribute | |||
id | ID | identifiziert ein einziges Element innerhalb eines Dokuments | |
class | CDATA | ordnet ein Element einer oder mehreren Klassen zu. | |
accesskey | ID | Tastaturkürzel | |
contenteditable | CDATA | editierbarer Inhalt | |
contextmenu | definiert Kontextmenü | ||
dir | ltr, rtl | definiert die Schreibrichtung innerhalb des Dokuments | |
draggable | ID | kann mit Drag & Drop gezogen werden | |
dropzone | CDATA | Aktion bei Ablegen | |
hidden | versteckter Inhalt | ||
lang | NAME | legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766] | |
spellcheck | ID | Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
| |
style | CDATA | notiert direkt in einem Element- style sheet data | |
tabindex | NAME | zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird. | |
title | CDATA | betitelt oder beschreibt ein Element. | |
width | CDATA | 300 | Breite in CSS-Pixel |
height | CDATA | 150 | Höhe in CSS-Pixel |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Siehe auch
- JavaScript/Canvas – Hier erfahren Sie, wie Sie die Möglichkeiten von Canvas anwenden können.
- JavaScript/WebGL
Weblinks
- W3C: the canvas-element
Um eine gute Zugänglichkeit von canvas-Darstellungen zu erreichen, können Sie auch versuchen, in JavaScript zusammen mit der Bilddarstellung eine textuelle Beschreibung des Bildes zu generieren und als HTML-Inhalt des canvas-Elements bereitzustellen.