HTML5 Grundkurs

Das Canvas-Element

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das <canvas>-Element bietet JavaScript-Entwicklern eine Leinwand, auf der per Code gezeichnet werden kann. Das ermöglicht die dynamische Generierung von Grafiken wie etwa Diagrammen oder auch von interaktiven Spielen.
07:50

Transkript

Es ist zwar nur ein einzelnes HTML-Element, doch es steckt eine ganze Menge dahinter. Die Rede ist von canvas. canvas ist ein Thema, zu dem gibt es Bücher mit mehreren hundert Seiten. Wir wollen einfach nur kurz vorstellen, was es sich handelt. Kleines Beispiel zeigen, und dazu liege ich gleich eine neue Datei an, nenne sie canvas.html und baue dann direkt das neue Element ein: canvas braucht als Attribut einer größen Angabe, also sagen wir beispielsweise mal 600, mal 400 Pixel, und vielleicht noch eine ID, auf die wir dann später per JavaScript besser zugreifen können. Für diejenigen Browser, die keinen canvas unterstützen, für die gibt es möglicherweise noch einen Ausweg, und zwar zumindest, dass man hier einen Hinweistext angibt: "Ihr Browser unterstützt canvas nicht." Gebe auch noch entsprechend Workaround-Feld für Browser. Ich empfehle da einen Hinblick auf canvasuser.com Es gibt Hilfsbibliotheken, die das dann relativ gut sogar auch für beispielsweise ältere Internet-Explorer- Versionen kompatibel machen. Schauen wir uns aber viel interessanter an, wie man dann so ein Element ansteuern kann, worum handelt es sich. canvas -englisches Wort für Leinwand, und das ist genau das. Wir haben hier eine 600 mal 400 Pixel Leinwand, auf der können wir zeichnen. Dazu gibt es eine sehr, sehr umfangreiche JavaScript API, Daher kommt dann natürlich auch der Umfang von Büchern zu diesem Thema. Wir haben also eine Reihe von Methoden, eine Reihe von Features, mit denen wir auf dieser Leinwand Formen erzeugen können. Das Ganze ist ursprünglich, ja, geometrisch vorgesehen, das heißt, wir haben Elemente via Rechtecke, Linien etc. die wir zeichen können, können aber auch gerasselte Informaton, also beispielsweise Pit maps entsprechend unterbringen, haben per JavaScript Zugriff dadrauf und können entsprechend auch durchaus an Animationen arbeiten, die beispielsweise eine Reihe von Spielen, die auf Basis von dieser Canvas-Technologie umgesetzt worden sind. Nun, wir wollen das direkt mal ausprobieren, müssen ein bisschen warten, bis die komplette Seite geladen ist, also bis das DOM bereit ist, dabei keine externen Dateien laden. Auf dieser Seite können wir den Weg des geringsten Widerstandes wählen und einfach auf das Load-Ereignis der Seite warten. Wenn auf der Seite noch externe Ressourcen vorhanden wären, ist Load möglicherweise nicht die beste Option, denn Load tritt tatsächlich erst ein, wenn die HTML-Seite und alle externen verlinkten Dateien geladen worden sind, ,ill man also nicht immer. So, wenn aber diese Seite komplett geladen ist, egal wie, dann habe ich Zugriff auf das komplette DOM, kann also zum Beispiel auf das Canvas-Element zugreifen über document. getElementById. Es hat, ja, praktischerweise eine ID erhalten. Das ist jetzt dann eine Representation, dieses Canvas-Element, das in der Variable c steckt. Um jetzt zeichen zu können, müssen wir den sogenannten Zeichenkontext erzeugen. Es gibt nämlich mehrere Varianten, ganz klassisch 2D oder 3D auf Basis von OpenGL. 3D ist von der Mathematik relativ anspruchsvoll, würde auch jetzt nicht in den Umfang des Trainings passen. Sie widmen sich mehrere hundert Seiten Buch. Deswegen bleiben wir einfach bei der 2D Variante, erzeugen uns einen Kontext. Ich nenne den ganz gerne ctx für Kontext und rufe dann einfach getContext auf und muss als String-Parameter übergeben, was für eine Art von Kontext. Ich will den 2D-Kontext, ich will, ja, jetzt nicht 3D operieren, sondern ich hätte gerne einen 2D-Modus sozusagen. Und jetzt habe ich entsprechend den Zeichenkontext erzeugt und über diesen Kontext kann ich ab jetzt entsprechend auf meinem Canvas zeichnen. Lassen Sie uns das an einem kleinen Beispiel demonstrieren und verifizieren, das heißt,wir legen eine geometrische Form an, vielleicht die einfachste Möglichkeit ist zu sagen, wir zeichen ein Rechteck. So ein Rechteck ist besonders gut sichtbar, wenn es mit einer Farbe gefüllt ist, und genau diese Füllung können wir angeben, und zwar ist das die Eigenschaft fillStyle, also "Füllstil". Gibts mehrere Möglichkeiten, zum Beispiel, rgbtriple, aber ich würde gerne rgba verwenden, also mit Alphakanal, das heißt, wir haben dann so eine Art von Halbtransparenz, nehmen irgendeine Farbe, zum Beispiel, 255, 128, 64 und Alpha-Transparenz Alphakanal 50%, und dann wird damit das Rechecke erzeugt, also fillRect, und dann brauchen wir entsprechend Koordinaten. Ich würde sagen, wir nehmen vielleicht bei einer Canvas groß von 600,400, fangen wir vielleicht an bei 50,50 und dann 300, 200 ist vielleicht ein ganz guter Wert, speichern das, springen dann üblich in unseren Browser, laden die Datei canvas.html und sehen jetzt ein na ja halbwegs oranges, aber nur halbdurchsichtiges, deswegen nur halbwegs oranges Rechteck. Um das mit der Transparenz auch entsprechend zu verifizieren, können wir noch ein zweites Rechteck erzeugen, also wir ändern den Füllstil auf einen anderen Wert, zum Beispiel, diesmal nehmen wir ganz normales rgb, sagen 0, 0, 255 haben also volles Blau, und dann gibt es wieder ein Rechteck, und das überlappt zum bisschen das andere, fangen vielleicht an bei 100 mal 80 Pixel, hat dieselbe Breite und Höhe, wie das vorherige Rechteck. Wieder speichern, wieder Browser aufrufen und canvas.html laden. Und ja, in der Tat, wir haben das Rechteck. Dieses liegt jetzt über dem halbtransperenten Rechteck, das heißt, dieses orange Rechteck oder einigermaßen orange Rechteck liegt über dem weißen Hintergrund, deswegen es ist ein bisschen aufgehellt, das blaue Rechteck hat keinen Alphakanal gesetzt, das heißt, das ist nicht durchsichtig, liegt deswegen komplett über dem orangen Rechteck, den die Zeichenreihenfolge entscheidet. Würden wir das umstellen, um den Unterschied zu sehen, also nennen diese beiden Zeilen, dann nach oben verschoben werden, ja, Sie die Zeichenfolge ändern, dann ändert sich hier auch das Bild. Ich lade neue. Wir sehen hier, dass das blaue Rechteck tatsächlich im Hintergrund liegt, denn liegt das orange drüber, dann erhält man hier so ein Violett. Ein klassischer Anwendungsfall für Canvas sind beispielsweise Umfragewerte oder auch Umfrageergebnisse, beispielsweise, wird das bei Wahlen gern verwendet, bei der Berichterstattung, aber auch bei den diversen Umfragen auf verschiedenen Websites. Dann muss man nämlich nicht immer serverseitig aufwendig eine Grafik generieren, die den aktuellen Stand darstellt als Balkendiagramm,sondern man lädt vom Server einfach nur die tatsächlichen Daten, also Meinung X hat so und so viel Prozent, Meinung Y hat so und so viel Prozent oder Partei so und so viel Prozent, die Partei hat diese Prozentzahl. Diese Daten, die von dem Betrag her sehr, sehr klein sind und vielleich doch quasi im Hintergrund per JavaScript/IX geladen werden können, die werden dann von JavaScript-Code eben umgewandelt in so ein Säulendiargamm oder ein Balkendiagramm, und da wir geometrische Formen haben, gibt es natürlich auch so Tortendiagramme etc. Das also ein ganz klassischer Anwendungs- fall hierfür, durchaus sehr bequem. Man muss diesen Anwendungsfall halt auch de facto haben, um also fotorealistische Darstellungen zu erzeugen. Dann nimmt man vielleicht doch lieber eine vorgefertigte Grafik oder irgendeine serverseitige Logik, aber ansonsten ist Canvas für viele Einsatzzwecke durchaus gut geeignet.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!