Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

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.

zugängliche Alternativtexte[Bearbeiten]

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.


Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
canvas {
  background: white; 
  border: 1px solid #333;
}
Das canvas-Element erhält einen weißen Hintergrund (, der aber durch das gezeichnete Bild überdeckt wird) und einen 1px breiten dunkelgrauen Rand.
    <canvas id="canvas" width="500" height="300">
       Beispiel für eine Kachelung eines Musters in Canvas.
    </canvas>
    
    <p>Rastergrafik, die als Kachel verwendet wird.</p>
    <img id="vorlage" src="https://wiki.selfhtml.org/images/f/f3/Kachel-hexagon.png" alt="Muster">
In diesem Beispiel wird ein Muster zum Füllen der Seite verwendet.

Als Vorlage dient eine Rastergrafik, die auf der Seite bereits geladen wurde, und über ihre id referenziert wird. Mit ihr wird ein Muster mit context.createPattern(image,'repeat'); erstellt.

Das anschließend erstellte Rechteck wird dann mit dem Muster gefüllt.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]