Artikel-Schlagworte: „canvas“

HTML5: Mit Canvas Flüssigkeit simulieren

2. Februar 2011
Autor: Jochen

Für ein Projekt wollten wir mittels Canvas-Element den Effekt von ineinander fließenden Tropfen simulieren. Ein üblicher Ansatz ist die Verwendung eines Blur-Filters und anschließend die Erhöhung des Kontrastes (hier ein kleines Beispiel). Das ist mit dem Canvas-Element so leider nicht (performant) möglich.

Stattdessen war unser Ansatz einen radialen Verlauf auf einen Kreis zu zeichnen, der nach außen hin transparent wird und dann über die Überlagerungen den gewünschten Effekt zu erzielen. Das Ergebnis war allerdings nicht so berauschend. Da Kreise zeichnen recht teuer ist war die Performance unterirdisch und zudem wirkten die Überschneidungen nicht wirklich flüssig. Diesen Beitrag weiterlesen »

Schlagworte: , , , , , , , , , ,
1 Kommentar »

HTML5 Canvas: Performance Teil 1

22. Dezember 2010
Autor: Jochen

Wie man an meinen letzten (hier und hier) HTML5 Artikeln vielleicht erkennen konnte, experimentiere ich aktuell ein wenig mit dem Canvas Element aus HTML5. Dabei hat sich das Gefühl eingestellt, dass es bezüglich der Performance große Unterschiede zwischen den verschiedenen Browsern und Geräten gibt. Um diesen Eindruck mit ein wenig Zahlen zu untermauern habe ich einen kleinen Testfall geschrieben: Diesen Beitrag weiterlesen »

Schlagworte: , , , , , , ,
1 Kommentar »

Sprites mit HTML5

15. Dezember 2010
Autor: Jochen

Bevor 3D seinen Siegeszug im Bereich der Computerspiele antrat wurde üblicherweise mit Sprites gearbeitet. Im Bereich der Flash Spiele hat dieser Ansatz, insbesondere durch die Game Engine flixel und der immer beliebteren Retro Optik, in letzter Zeit eine kleine Renaissance erlebt. In diesem Beiträg möchte ich allerdings nicht auf die Umsetzung innerhalb der Flash Plattform eingehen, sondern zeigen wie sich eine auf Sprites basierte Animation mit dem HTML5 Canvas Element umsetzen lässt.
Diesen Beitrag weiterlesen »

Schlagworte: , , , , , ,
1 Kommentar »

HTML5, Canvas, JavaScript & Processing

16. November 2010
Autor: Jochen

Eine der interessantesten Neuerungen, die mit HTML5 Einzug erhalten, dürfte das Canvas-Element sein, welches die Möglichkeit bietet dynamisch Bitmapdaten zu erzeugen und zu manipulieren. Dadurch werden z.B. aufwendige Animationen direkt durch HTML und JavaScript realisierbar, ohne den Umweg über zusätzliche Browser-Plugins (Flash, Silverlight usw.) nehmen zu müssen.

Leider ist die Canvas API nicht sonderlich komfortabel zu nutzen, weshalb ggf. der Einsatz einer Abstraktionsbibliothek Sinn macht. Im folgendem Beispiel wird hierfür Processing.js verwendet. Dabei handelt es sich, wie der Name schon vermuten lässt, um eine Portierung der Programmiersprache Processing nach JavaScript. Dass hier Processing als Vorlage verwendet wurde macht insofern Sinn, als dass es sich dabei ohnehin um eine auf die Erstellung von Grafiken und Animationen spezialisierte Sprache handelt.

Aber nun mal ein wenig Code…
Diesen Beitrag weiterlesen »

Schlagworte: , , , , ,
3 Kommentare »