Canvas

Canvas

Alle Grafik-Anweisungen werden Live mit der Programmiersprache → Javascript ausgeführt.
Diese Technologie erlaubt es, interaktiv und sehr rasch Grafik-Produkter herzustellen, die fast beliebig komplex werden können.


Grafik-Animation mit Canvas

◀  Diese Grafik wurde von einem Programm in der Programmiersprache → Javascript berechnet und in ein Canvas-Element gemalt. Sie wird in Intervallen von je 1 Sekunde neu berechnet und gemalt.
Als Nachweis der Live-Herstellung dient die aktuelle Zeit, die analog dargestellt wird.

Das Javascript-Programm wird Live an ihrem Arbeits-PC ausgeführt.
Alle Bestandteile dieser Technologie sind im Quelltext offen einsehbar.

Details zu diesem Beispiel

Interaktive Grafik mit Canvas

Steuern sie die Grafik mit diesem SchiebeRegler:

◀  Die Grafik wird bei jeder Änderung des SchiebeReglers neu berechnet und gezeichnet.

Das Javascript-Programm wird Live an ihrem Arbeits-PC ausgeführt.
Damit wird die besonders rasche Reaktion dieser Technologie erreicht.

Details zu diesem Beispiel

Einfache Grafik mit Canvas

◀  Die Grafik aus wenigen einfachen Elementen wurde von einem → Javascript-Programm gemalt.

Dieses besonders ausführlich kommentierte Beispiel ist empfehlenswert zum Kennenlernen der Canvas-Programmierung !

Mit Klick auf den Button Paint wird die Grafik neu gemalt.
Als Nachweis dient die aktuelle Zeit, die digital als String (Text) in die Grafik 'gemalt' wird.
Der Button Clear löscht die Grafik.

Details zu diesem Beispiel

Berechnete Pixel-Grafik mit Canvas

◀  Die Grafik wurde Live von einem → Javascript-Programm erzeugt. Die Farbe jedes einzelnen Bildpunkts wurde individuell mit einem Algorithmus (Rechen-Vorschrift) berechnet.

Die Kreis-Scheibe zeigt die Beschreibung von Farben im HSB-System (Farbton, Sättigung, Helligkeit)

Details zu diesem Beispiel


◀  Auch diese Grafik wurde von einem → Javascript-Programm erzeugt.

Die Herstellung der charakteristischen Figur erfordert relativ umfangreiche Rechnungen für jeden einzelnen Bildpunkt.
Sie braucht trotzdem meist weniger Zeit als das Laden einer Grafik-Datei vom Webserver, erlaubt jedoch die interaktive Berechnung beliebiger Details.

Details zu diesem Beispiel

Pixel-Grafik-Filter mit Canvas

◀  Das Original dieser Grafik stammt aus einem Bild von  Paul Gauguin (1848‑1902), Quelle: Wikimedia Commons

Mit Canvas kann man 'Filter' programmieren, mit denen man jeden einzelnen Bildpunkt einer Grafik nach fast beliebigen Regeln (Algorithmen) verändern kann.

Details zu diesem Beispiel