Über Canvas

Ein Canvas-Element (vom englischen canvas für "Leinwand" oder "Gemälde") ist ein - in der Sprache HTML - mit Höhen- und Breiten-Angaben beschriebener Bereich, in den per JavaScript gezeichnet werden kann. Ursprünglich von der Firma Apple als Bestandteil des WebKit entwickelt, ist es später von der Arbeitsgruppe WHATWG als Bestandteil der Auszeichnungssprache HTML5 standardisiert worden.

Wikipedia, 10.12.2015

Unterstützung

Canvas wird nativ (also ohne Plug-Ins) von den aktuellen Versionen der Browser Internet Explorer, Firefox, Opera, Safari und Chrome unterstützt.

Alte Versionen des Internet Explorers, die heutzutage noch immer weit verbreitet sind, bieten keine Unterstützung für Canvas, da sie veröffentlicht wurden, bevor das Canvas-Element standardisiert wurde.

Die alten Versionen des Internet Explorers können jedoch mit Plugins, welche von Mozilla und Google zur Verfügung gestellt werden, um die Canvas-Funktion erweitert werden.

Wikipedia, 10.12.2015

Particles!

Aus dem Netz kopiert und stark angepasst von Dennis am 10.12.2015

Dynamische Grafiken mit dem HTML5 Canvas

Wenn du die Maus im Canvas Element bewegst werden die Partikel ihr folgen. Ein Linksklick lässt die Partikel von der Maus wegschiessen. Wenn du die Maustaste gedrückt hälst werden die Partikel von ihr ferngehalten.

Realisiert ist diese Demo via CSS mit relativer Positionierung. Leider ist es für die Funktion dieses Canvas Elementes notwendig via HTML eine feste Höhe und Breite für den Canvas zu generieren. Im Javascript wird mit einer bounding-Funktion die absolute Position des Mauszeigers auf dem Bildschirm ausgelesen; der Regelfall wäre relativ zum HTML. Mit diversen mathematischen Funktionen werden die Partikel generiert und ihre Reaktionen auf diverse Events festgelegt.

Leider war es mir nicht möglich die Breite dynamisch zu machen. Trotzdem viel Spass beim ausprobieren bzw. "spielen"!

Geschrieben von Dennis am 10.12.2015