HTML5 enthält ein spannendes Element namens CANVAS. Es hat viele Verwendungsmöglichkeiten, aber um es verwenden zu können, müssen Sie etwas JavaScript lernen, HTML, und manchmal CSS.
Dies macht das CANVAS-Element für viele Designer ein wenig entmutigend, und die meisten werden es wahrscheinlich ignorieren das Element, bis es zuverlässige Tools gibt, um CANVAS-Animationen und -Spiele zu erstellen, ohne es zu wissen JavaScript.
Wofür HTML5 Canvas verwendet wird
Das HTML5-CANVAS-Element kann für viele Dinge verwendet werden, für die Sie zuvor eine eingebettete Anwendung wie Flash verwenden mussten, um Folgendes zu generieren:
- Dynamische Grafiken
- Online- und Offline-Spiele
- Animationen
- Interaktives Video und Audio
Tatsächlich ist der Hauptgrund für die Verwendung des CANVAS-Elements, dass es einfach ist, eine einfache Webseite zu erstellen in eine dynamische Webanwendung und wandeln Sie diese Anwendung dann in eine mobile App für die Verwendung auf Smartphones um und Tablets.
Wenn wir Flash haben, warum brauchen wir dann Canvas?
Laut der HTML5-Spezifikation, ist das CANVAS-Element: „...eine auflösungsabhängige Bitmap-Leinwand, die zum spontanen Rendern von Grafiken, Spielgrafiken, Kunst oder anderen visuellen Bildern verwendet werden kann.“
Mit dem CANVAS-Element können Sie Grafiken, Grafiken, Spiele, Kunst und andere visuelle Elemente in Echtzeit direkt auf der Webseite zeichnen.
Sie denken vielleicht, dass wir das mit Flash bereits tun können, aber es gibt zwei wesentliche Unterschiede zwischen CANVAS und Flash:
- Das CANVAS-Element ist direkt in den HTML-Code eingebettet. Die darauf basierenden Skripte befinden sich entweder im HTML-Code oder in einer verlinkten externen Datei. Das bedeutet, dass das CANVAS-Element Teil des Document Object Model (DOM) ist.
- Flash ist eine eingebettete externe Datei. Es verwendet entweder das EMBED- oder das OBJECT-Element zur Anzeige und kann nicht direkt mit den anderen HTML-Elementen interagieren. Da das CANVAS-Element Teil des DOM ist, kann es auf vielfältige Weise mit dem DOM interagieren.
- Sie können beispielsweise eine Animation erstellen, die sich ändert, wenn mit einem anderen Teil der Seite interagiert wird, z. B. wenn ein Formularelement ausgefüllt wird. Mit Flash können Sie höchstens das Starten des Flash-Film oder Animation, aber mit CANVAS können Sie viele verschiedene Effekte erzeugen und sogar den Text aus dem Formularfeld in die Animation einfügen.
- Das CANVAS-Element wird nativ von Webbrowsern unterstützt. Damit Benutzer Flash tatsächlich verwenden können, muss in ihrem Browser das Plugin installiert sein. Dies ist für die meisten Leute oft ein Ärgernis aufgrund veralteter Flash-Installationen oder der Tatsache, dass ihr Betriebssystem es einfach nicht unterstützt.
- Früher hatte jeder Browser das Plugin installiert, aber das ist nicht mehr der Fall, und viele entfernen das Plugin sogar aufgrund von Schwierigkeiten. Außerdem ist es nicht einmal auf dem beliebten iOS-Plattform.
Canvas ist nützlich, auch wenn Sie nie geplant haben, Flash zu verwenden
Einer der Hauptgründe für die Verwirrung des CANVAS-Elements ist, dass sich viele Designer an ein völlig statisches Web gewöhnt haben. Bilder mögen animiert sein, aber das ist vorbei GIF, und natürlich können Sie Videos in Seiten einbetten, aber auch hier handelt es sich um ein statisches Video, das einfach auf der Seite sitzt und möglicherweise aufgrund von Interaktionen startet oder stoppt, aber das ist alles.
Mit dem CANVAS-Element können Sie Ihren Webseiten viel mehr Interaktivität hinzufügen, da Sie jetzt Grafiken, Bilder und Text dynamisch mit einer Skriptsprache steuern können. Das CANVAS-Element hilft Ihnen, Bilder, Fotos, Diagramme und Grafiken in animierte Elemente zu verwandeln.
Wann Sie die Verwendung des Canvas-Elements in Betracht ziehen sollten
Ihr Publikum sollte Ihre erste Überlegung sein, wenn Sie entscheiden, ob Sie das CANVAS-Element verwenden möchten.
Wenn Ihr Publikum hauptsächlich verwendet Windows XP und IE 6, 7 oder 8, dann ist es sinnlos, ein dynamisches Canvas-Feature zu erstellen, da diese Browser es nicht unterstützen.
Wenn Sie eine Anwendung erstellen, die nur auf Windows-Rechnern verwendet wird, ist Flash möglicherweise die beste Wahl. Eine Anwendung, die auf Windows- und Mac-Computern verwendet werden soll, könnte von einer Silverlight-Anwendung profitieren.
Wenn Ihre Anwendung jedoch auf mobilen Geräten (sowohl Android als auch iOS) sowie auf modernen Geräten angezeigt werden muss Desktop-Computern (auf die neuesten Browserversionen aktualisiert), dann ist die Verwendung des CANVAS-Elements eine gute Wahl.
Beachten Sie, dass Sie bei Verwendung dieses Elements Fallback-Optionen wie statische Bilder für ältere Browser haben, die es nicht unterstützen.
Es wird jedoch nicht empfohlen, HTML5-Canvas für alles zu verwenden. Du solltest noch nie Verwenden Sie es für Dinge wie Ihr Logo, Ihre Überschrift oder Ihre Navigation (obwohl es in Ordnung wäre, einen Teil davon zu animieren).
Gemäß der Spezifikation sollten Sie die Elemente verwenden, die für das, was Sie erstellen möchten, am besten geeignet sind. Daher ist die Verwendung des HEADER-Elements zusammen mit Bildern und Text dem CANVAS-Element für Ihren Header und Ihr Logo vorzuziehen.
Auch wenn Sie a. erstellen Website oder eine Anwendung, die in einem nicht interaktiven Medium wie Drucken verwendet werden soll, sollten Sie sich bewusst sein, dass das dynamisch aktualisierte CANVAS-Element möglicherweise nicht wie erwartet gedruckt wird. Möglicherweise erhalten Sie einen Ausdruck des aktuellen Inhalts oder des Fallback-Inhalts.