Vorheriger Artikel Nächster Artikel

Sponsored Post: Das Canvas-Element in HTML5

Mit hält das Canvas-Element Einzug in die . Es gibt einem die Möglichkeit auf der Webseite, auf der es verwendet wird, zu zeichnen und somit von einfachem Text über Bewegtbilder bis zu kompletten Spielen alles direkt in HTML darzustellen – ohne die Verwendung von zusätzlichen Plugins wie Silverlight oder Flash. Dieser Artikel ist eine kurze Einführung in die Möglichkeiten und Nutzung des Canvas-Elements.

Sponsored Post: Das Canvas-Element in HTML5

Künstlerische Freiheit

Das Canvas Element ist einfach deklariert

<canvas id="meinbild" width="400" height="400"> 
    Dieser Browser unterstützt das Canvas Element nicht! 
</canvas>

und wird wie alle HTML5-Elemente von Browsern, die diese nicht verstehen, einfach ignoriert. In diesem Fall wird der Inhalt zwischen den Tag-Elementen angezeigt. Doch so richtig anfangen kann man mit dem Element erst etwas, wenn man es mittels JavaScript manipuliert.

Die Arbeitsfläche vorbereiten

Um mit dem Canvas zu arbeiten, muss man den Modus bestimmen, in dem man zeichnen möchte. Momentan ist im HTML5-Standard nur ein 2D-Modus spezifiziert.

var canvas = document.getElementById('meinbild'); 
var surface = canvas.getContext('2d');

Durch den Code hat man nun Zugriff auf den Canvas Context. Auf diesen kann man mit Hilfe diverser APIs zeichnen und der Webseite Leben einhauchen. Manipuliert werden direkt die Pixel der Fläche, die man mittels Canvas deklariert hat. Im vorigen Beispiel ist dies eine Fläche von 400 x 400 Pixeln die man direkt ansprechen kann. Die Entwickler-Spezifikation vom W3C zeigt die Details des 2D Contexts für das Canvas Element. Eine weitere gute Zusammenstellung der Funktionen findet man im Cheat Sheet.

Die Leinwand mit Leben füllen

Das Prinzip zum Arbeiten mit dem Canvas ist immer das gleiche: Man setzt die Rahmenparameter und zeichnet dann Text, Linien oder Grafiken. Der Canvas verhält sich dabei genauso wie eine Leinwand. Gemaltes bleibt bestehen bis man es überschreibt. Im Prinzip wie bei einem Ölgemälde, das man immer wieder überpinseln kann.

Beispiel Text

Um Text zu zeichnen, setzt man zuerst Farbe, Schrift sowie Größe und wählt eine entsprechende Funktion zum Zeichnen.

surface.fillText( "HTML5", 0, 0 );

Der vorangehende Code zeichnet den Text "HTML5" mit den Standardeinstellungen an der Position 0,0, also in der linken oberen Ecke. Allerdings wird man sich wundern, dass kein Text zu sehen ist. Das liegt daran, dass der Text auf der y-Achse positioniert ist. Man müsste also noch 10 Pixel nach unten gehen, um den Text zu sehen. Alternativ kann man auch die Eigenschaft textBaseline umstellen.

surface.textBaseline = "hanging"; 
surface.fillText( "HTML5", 0, 0 );

Der Text wird dann dargestellt, wie man es erwarten würde:

Richtig schön ist der Text allerdings noch nicht. Man kann den Text aber beispielsweise mit ein wenig Schatten und einer anderen Schriftart aufhübschen:

surface.textBaseline = "hanging"; 
surface.font = "20pt Helvetica"; 
surface.shadowBlur = 10; 
surface.fillStyle = "red"; 
surface.fillText( "HTML5", 0, 0 );

Schon hat man einen netten Schriftzug:

Farbverläufe

Statt einer beliebigen Farbe kann man zum Füllen von Texten und Flächen auch Farbverläufe und Bildmuster verwenden. Zum Beispiel definiert man einen radialen Farbverlauf mit der Funktion createRadialGradient und definiert verschiedene Farbpunkte mit der Methode addColorStop auf diesen Verlauf:

var gradient = surface.createRadialGradient( 150, 100, 20, 150, 50, 200); 
gradient.addColorStop( 0, "white" ); 
gradient.addColorStop( 0.5, "yellow"); 
gradient.addColorStop( 1, "lightblue" ); 
surface.fillStyle = gradient; 
surface.fillRect(0,0,400,400);

Mit einfachen Mitteln hat man eine Sonne, die am blauen Himmel leuchtet.

Beispiel Bilder

Bilder lassen sich auch auf einen Canvas anwenden. Ein Image-Element als Quelle kann direkt auf den Canvas gezeichnet werden. Der folgende Code kopiert eine Grafik eines Image-Elements in den Canvas:

var image = document.getElementById("myImage"); 
surface.drawImage( image, 0, 0 );

Die Grafik wird in diesem Fall eins zu eins kopiert: Hat der Canvas zum Beispiel eine Größe von 400 x 400 Pixeln und die Grafik ist deutlich größer, sieht man nur die 400 x 400 Pixel. Der Rest wäre dann abgeschnitten.

Komposition

Interessante Effekte lassen sich mit der Komposition des Canvas erstellen. Dabei kann man definieren, wie sich die nächsten Zeichen-Operationen verhalten. Der Standard ist source-over, eine Zeichen-Operation überschreibt die vorherige. Ändert man das Ganze auf destination-atop so lässt sich mit dem weichgezeichneten Schatten ein Stanz-Effekt erzeugen:

surface.drawImage( image, 0, 0, surface.width, surface.height ); 
surface.globalCompositeOperation = "destination-atop"; 
surface.shadowOffsetX = 2.0; 
surface.shadowOffsetY = 2.0; 
surface.shadowBlur = 10; 
surface.shadowColor = "Black"; 
surface.fillText( "HTML5!", surface.width / 2, surface.height / 2 );

Das Ergebnis ist der folgende Stanz-Effekt:

Dieser Effekt steht in einem jQuery Plugin zur Verfügung, ein Blog Post dazu beschreibt die Entstehung.

Ich will doch nur Spielen

Mit Hilfe von Timer-Objekten lassen sich auch komplette Spiele realisieren. Die Grundlagen sind einfach. Man benötigt eine Game Loop, die immer wieder durchlaufen wird:

setInterval( function() { 
    updateModel(); 
    drawSurface(); 
}, 1000 / 60 );

In der Funktion updateModel() wird letztlich das Spielmodell berechnet und auf Aktionen reagiert, die der Spieler tätigt. In der Funktion drawSurface() wird das aktualisierte Spielmodell auf den Canvas gezeichnet. Das passiert alle 16.667 Millisekunden, das entspricht 60 Frames pro Sekunde.

Ein Beispiel für ein Canvas-basiertes Spiel ist Cut the Rope. Dieses ist seit kurzem in einer HTML5-Version erschienen.

Hardwarebeschleunigung

Dass selbst richtige Spiele mittlerweile auf Basis von HTML5 erscheinen, ist nicht nur der Popularität von JavaScript zu verdanken, sondern der Tatsache, dass moderne Browser die Hardwarefähigkeiten des lokalen Rechners voll ausnutzen und beispielsweise den Canvas mittels GPU beschleunigen. Ein Spiel mit 60 Frames pro Sekunde ist somit kein Problem mehr und lässt den Webentwickler in ungeahnte Sphären vordringen. Wer sehen möchte, was sein Browser auf der Hardware leistet, kann sich eine entsprechende Tech-Demo anschauen.

Fazit

Mit dem Canvas Element ergeben sich Möglichkeiten, die bisher Flash oder Silverlight vorbehalten waren. Ob Typografie, Bilder, Videoeffekte oder Spiele – der Canvas ist die Leinwand mit der man tolle Sachen erstellen kann. Der künstlerischen Freiheit sind keine Grenzen gesetzt.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Daniel am 25.01.2012 (15:26Uhr)

    Dass ausgerechnet die Firma, die mit ihren Browsern bislang am meisten die Standards pervertiert hat, diese Kategorie sponsert, hat schon etwas skurriles...

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema HTML5
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

SEO-Reports für Fortgeschrittene: So hast du deine Website im Blick [t3n-Video-Workshop]
SEO-Reports für Fortgeschrittene: So hast du deine Website im Blick [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]
Layouts mit der CSS-Box-Modell-Alternative Flexbox einfacher umsetzen [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen