• Christian Hinzmann
  • IT-Blog

Canvas und SVG

 

Natürlich ist auch der canvas-Tag ein dankbarer Empfänger von CSS. Canvas kann man sich so vorstellen: Es funktioniert wie Paint von Microsoft. Es kann also keine gemalten Elemente beeinflussen in irgendeiner Art. Was einmal auf das canvas-Tag gezeichnet wurde, also auf die Leinwand, ist auch so erst einmal drauf, wie bei einem Bild im real-life.. ja, real-life-Bild - soetwas gibt es auch noch ^^. Für die jüngeren unter uns : Ein Bild auf ein normales Blatt Papier zeichnen ist, als würdet ihr in Paint etwas zeichnen, bloß mit physisch existenten Dingen und ihr habt den Ausdruck dann sofort vor Augen, nur, dass ihr nichts wieder entfernen könnt vom Papier und nicht selten Bäume dafür sterben müssen. Aber ich schweife ab.

Nun kann mittels CSS die Leinwandgröße und die Grundfarbe etc. der Leinwand eingestellt werden, aber die spannende Frage ist nun : "wie zeichne ich den da drauf ?" - Auf Canvas wird mit einer mächtigen Javascript-API, die in der Regel bereits vorhanden ist, sobald auch das canvas-Tag ausgeführt werden kann. Nun kann auf canvas mittels Javascript lustig drauf los gemalt werden im 2D- und 3D Bereich - Ja , 3D .. das ermöglicht es ungeahnte neue Webseiten zukünftig zu erstellen. Sollen Animationen etc. gemalten werden sollen, so muss für jedes Bild die Leinwand neu gesäubert werden, da die einzelnen gezeichneten Objekte nach dem zeichnen nicht beeinflusst werden können. Das klingt nicht nur performancelastig, das ist es leider auch :( . Abhilfe schafft hier SVG. Wobei man fairnesshalber sagen muss, dass SVG ein selbstständiger Standart ist und mit HTML erst einmal soviel zu tun hat wie der Papst mit Abtreibungskliniken. Nichts des zu trotz harmoniert HTML5 mit SVG und SVG lässt sich auch ohne Probleme mit Canvas kombinieren, also man muss sich nicht zwingend auf eines der Techniken festlegen.

Aber was ist nun dieses "SVG"?. SVG ist ebenfalls zum zeichnen von Objekten auf der Webseite dar. Allerdings verhält es sich relativ gegenteilig zu Canvas. So können Objekte in SVG im nachhinein noch verändert werden, ohne gleich die ganze Zeichenfläche neu malen zu müssen. Zudem ist SVG, anders aus Canvas (Pixelorientiert), Vektororientiert. Das heißt, dass die Geometrieinformationen beim zeichnen erhalten werden, also frei skalierbare Bilder entstehen. Also kann man theoretisch Canvas mit Adobe Photoshop gleichstellen, welches ebenfalls Pixelorientiert arbeitet und SVG mit Adobe Illustrator gleichstellen, welches Vektororientiert arbeitet.  Also wir halten fest: Canvas und  SVG sind eine tolle Erneuerung, die spannende Webseiten ermöglichen wird und auch schon ermöglichen kann. Hierzu gibt es unzählige wunderbare und eindrucksvolle Beispiele bereits im Netz. Und nicht nur Webseiten, sogar ganze Applikationen und Spiele sind mittels der Techniken ohne nervige- und ressourcenfressenden Plug-ins realisierbar. Es ist ein vergnügen für Anwender wie Host diese neue Techniken zu erleben.
 
Haben Sie nun Lust bekommen Ihre Webseite mit dieser Technik aufrüsten zu lassen und Ihren Kunden ein einmaliges Surfereignis zu bieten? Dann kontaktieren Sie uns - wir helfen Ihnen gerne weiter :).
 
Sollen Sie Fragen haben, nähere Informationen über HTML5 Programmierung wollen oder einfach ein Projekt in HTML5 planen und benötigen Hilfe - dann schreiben Sie uns einfach. Wir helfen gerne weiter.

canvas, svg

  • Erstellt am .
  • Aufrufe: 3558