Minimal-Grafik mit Canvas

Minimal-Grafik mit Canvas


Einfache Grafik-Elemente mit Canvas

◀  Diese Grafik wurde von einem Programm in der Programmiersprache → Javascript berechnet und in ein HTML <canvas>-Element gemalt.
Als Nachweis der Live-Herstellung dient die digital angegebene Zeit.

Das Javascript-Programm wird an ihrem Arbeits-PC ausgeführt.
Daher ist die interaktive Steuerung besonders schnell und einfach: Alle Programme befinden sich bereits (im Quelltext der Canvas-Grafik) auf ihrem Arbeits-PC

Alle Javascript-Funktionen des Grafik-Dokuments lassen sich fernsteuern,
z.B. mit diesen Links:   Paint,   Clear


Für diese Demonstration wurde das Beispiel in eine Mini-Webseite eingebettet. Diese wird hier als Live-Beispiel angezeigt.
Mit diesem Link wird die ↗ Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der ↗ Quelltext der Mini-Webseite angezeigt: Aus diesem Text hat ihr Browser die Grafik hergestellt.

Man kann die Grafik mit RechtsKlick als Datei canvas.png am eigenen Arbeits-PC speichern und mit jedem Browser oder Grafik-Programm anzeigen. Die darin angezeigte Uhrzeit bleibt allerdings in einer Datei unverändert.

HTML



Das <canvas>-Element sollte alle 3 hier angegebenen Attribute enthalten:

Das id-Attribut muss eindeutig sein und dient zur Identifikation des Elerments mit Javascript.

Die Größe in Bildpunkten (Pixeln) sollte mit den Attributen width und height programmiert werden, nicht mit einem CSS-style oder -class-Attribut.


Als Wert des Attributs wird der Name jener Javascript-Funktion angegeben, die nach dem vollständigen Laden des <body>-Elements ausgeführt werden soll (hier: do_onload() )
Wenn eine Canvas-Grafik nicht automatisch sondern nur manuell erzeugt werden soll, dann braucht man das onload-Attribut zumindest für diesen Zweck nicht.



Man kann prinzipiell jede mit Canvas erzeugte Grafik mit RechtsKlick als Datei canvas.png herunterladen. Das funktioniert unabhängig davon, ob sie direkt in einer Webseite enthalten ist oder (so wie hier) als eigenständiges Objekt eingebettet.

Die hier verwendete Mini-Webseite bietet zusätzlich die Möglichkeit, auch die Elemente zur Steuerung und die Javascript-Programme herunterzuladen:
Laden sie den ↗ Quelltext, schalten sie die Zeilen-Nummern mit Mausklick ab und speichern sie den Quelltext in einer Text-Datei *.html am eigenen Arbeits-PC.
Diese Datei lässt sich mit jedem Browser öffnen.

Javascript


Canvas-Grafik wird Live gemalt. Die Methode eignet sich daher gut zur interaktiven Steuerung (so wie das Beispiel dieser Seite) und für Animationen (z.B. → Analog-Uhr).

Dieses Beispiel demonstriert die Herstellung einfacher Grafik-Elemente mit je einer eigenen Funktion.
Es eignet sich daher gut zum Kennenlernen der Canvas-Technologie.
Grundkenntnisse von → Javascript werden allerdings vorausgesetzt.


HTML + Javascript-Quelltext

 Aus diesem Quelltext hat ihr Browser die Canvas-Grafik hergestellt (und berechnet sie weiterhin jede Sekunde neu).
Das Canvas-Element ist nicht in dieser Webseite enthalten, sondern in einer eigenen Mini-Webseite: So lässt sich der Text ohne störenden Overhead analysieren.

Mit diesem Link wird die ↗ Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der ↗ Quelltext der Mini-Webseite angezeigt: Aus diesem Text hat ihr Browser die Grafik hergestellt.

Der kleine HTML <body>-Teil (am Ende des Quelltextes) enthält nur das <canvas>-Element und die beiden HTML <button>-Elemente zur interaktiven Steuerung.

Die Javascript-Programme nehmen fast den gesamten Quelltext ein: Damit wird die Grafik gemalt.

Man kann den Quelltext in einer Datei *.html am eigenen PC speichern (Zeilen-Nummern vorher mit Klick abschalten): Die Datei lässt sich mit jedem Browser öffnen oder so wie hier in andere Webseiten einbetten.

Canvas-Programmierung



Das ↑ HTML <canvas>-Element wird mit seinem eindeutigen id-Attribut identifiziert. Danach wird mit Methode getContext() sein '2d-Context' an die Handle-Variable zugewiesen:
var n = document.getElementById('cv1');
ctx = n.getContext('2d');
Diese Aufgabe kann man jedoch erst nach dem vollständigen Laden des Dokuments ausführen, weil das <canvas>-Element davor noch nicht existiert.
Es genügt, diese Anweisungen 1mal auszuführen.
Daher wird dieser Code am besten von der onload-EventHandler-Funktion ausgeführt.

Danach kann man beliebig viele Canvas-Anweisungen auf das Grafik-Objekt anwenden. Die Variable (hier ctx) wird für jede einzelne Canvas-Anweisung als Handle (Handgriff) verwendet.



Diese Funktion wird sowohl automatisch von der onload-Funktion ausgeführt als auch interaktiv bei jedem Anklicken des "Paint"-Buttons.

Die Koordinaten x1...x5,y1...y5 der zu malenden Elemente sind hier allgemein angegeben, im realen Beispiel mit absoluten Zahlen.

Der Aufbau der Grafik erfolgt von hinten nach vorne: Später gemalte Elemente überdecken früher gemalte. Dieses Prinzip gilt ohne besondere Vereinbarung für jede Grafik-Technologie, also auch für → GD-Pixelgrafik oder → SVG-Objektgrafik.

In den folgenden Teilen dieses Kapitels werden die verwendeten Funktionen einzeln vorgestellt.



Der Koordinaten-Ursprung jeder Canvas-Grafik liegt in der linken oberen Ecke. Die X-Koordinate wird von links nach rechts gemessen, die Y-Koordinaten von oben nach unten (!).

Verwenden sie für die Namen von Funktionen keine Begriffe, die evtl. bereits für andere Objekte vergeben sind oder werden. Der Name clear() wäre z.B. für diese Funktion nicht zulässig.



Kreise, Bögen, Kreis-Segmente, Ellipsen usw. werden als Pfade gemalt. Man beginnt mit Methode beginPath()
Danach folgen beliebig viele Pfad-Anweisungen. Für einen Kreis genügt die Bogen-Anweisung arc():
ctx.arc(cx, cy, r, a0, a1);
Die Methode erwartet die beiden Koordinaten des Mittelpunkts (cx,cy), den Radius (r) und zuletzt Anfangs- und End-Winkel (a0,a1) im Bogenmaß. Mit a0=0 und a1=2Pi wird daher ein voller Kreis gemalt.

Mit Methode fill() wird der Pfad abgeschlossen und mit der zuletzt festgelegten Farbe fillStyle gefüllt.



Die Farbe (  '#00F') wird an die Eigenschaft fillStyle zugewiesen.

Canvas bietet die Methode fillRect() zum Malen eines mit Farbe gefüllten Rechtecks. Sie erwartet die beiden Koordinaten des Startpunkts (linke obere Ecke), danach Breite (nach rechts) und Höhe (nach unten).



Auch dieses Objekt wird als Pfad gemalt. Man beginnt mit Methode beginPath()

Mit Methode moveTo() definiert man die Koordinaten des Anfangs-Punkts.

Alle folgenden Methoden lineTo() malen gerade Linien zu den angegebenen Endpunkten.

Mit Methode fill() wird der Pfad abgeschlossen und mit der zuletzt festgelegten Farbe fillStyle gefüllt.



Die Farbe ( ● '#000') wird an die Eigenschaft fillStyle zugewiesen.

Schrift-Familie und -Größe wird an die Eigenschaft font zugewiesen.

Der Text wird mit Methode fillText() gemalt, d.h. mit der angegebenen Farbe gefüllt. In diesem Beispiel werden zusätzlich die Ränder der Zeichen mit strokeText() gemalt.
Beide Methoden erwarten als Argumente den zu malenden Text (String), danach die Koordinaten.



Sie enthält die private Sub-Funktion s(), die einen Zahlenwert 0...59 in einen String von 2 Ziffern umwandelt.

Ein aktuelles Zeit-Objekt Date() wird an die Variable dt zugewiesen.
Mit den Standard-Methoden getHours(), getMinutes(), getSeconds() werden die Bestandteile isoliert, mit Funktion s() in Strings von je 2 Zeichen umgewandelt und in der Variablen txt zusammengesetzt.
Dieser Text wird zuletzt mit Methode fillText() in die Grafik gemalt.

(Fern)-Steuerung mit Javascript


Fortgeschrittene EntwicklerInnen sollten einige weitere Steuerungs-Methoden kennen und bei Bedarf programmieren können.


Onload-EventHandler

Wesentliche Elemente der Programmierung (stark vereinfacht):
Javascript-Funktionen (Die Funktion do_paint() wird hier nicht angezeigt):
<head>
<script type="text/javascript">
var ctx;
function do_onload() {
var n = document.getElementById('cv1');
ctx = n.getContext('2d');
do_paint();
}
</script>
</head>
Details des HTML body-Elements:
<body onload="do_onload()">
<canvas id="cv1" width="350" height="210"> </canvas>
</body>



Die GET-Methode wird für das einfache Beispiel dieser Seite nicht verwendet. Sie wird hier lediglich als zusätzliche Möglichkeit der Steuerung angeführt.

Details der → GET‑Methode mit der Programmiersprache PHP

Beispiele für die Steuerung einer Canvas-Grafik mit der GET-Methode: → Analog-Uhr, → HSB-Farbscheibe


HTML-Formular: Bei jeder Änderung wird die Javascript-Funktion do_cb1() aufgerufen.
<form name="f1" method="get" action="">
<input type="checkbox" name="cb1" onchange="do_cb1()"/>
</form>
HTML-Button (BildschirmTaste): Beim Anklicken wird die Funktion do_button() aufgerufen.
<button onclick="do_button()">
Klick
</button>
HTML-HyperLink: Beim Anklicken wird die Funktion do_link() aufgerufen.
<a href="javascript:do_link()">
Klick
</a>



Einfache Event-Handler-Funktion:
function do_clear() {
ctx.clearRect(0,0,350,350);
}
Die Funktion ist im Live-Beispiel dieser Seite enthalten.
Damit wird die Canvas-Grafik gelöscht.



Einbettung der Mini-Webseite in diese Webseite:
<iframe name="if1" src="canvas_demo.html"></iframe>
Zur Fernsteuerung erhält das iframe-Element ein eindeutiges name-Attribut (hier: if1)

Fernsteuerung einer Javascript-Funktion der eingebetteten Mini-Webseite durch einen Hyperlink des übergeordneten parent-Dokuments:
<a href="javascript:if1.do_paint()">Paint</a>
Zur Fernsteuerung wird der Name des Dokuments (hier: if1) in Objekt-Syntax vor jenen der Funktion gestellt.

Fernsteuerung einer Javascript-Funktion der parent-Webseite durch die eingebettete Mini-Webseite:
function message_to_parent() {
parent.canvas_info('Hallo');
}
Damit wird der String 'Hallo' an die Funktion canvas_info() des parent-Dokuments gesendet. Sie sollten dafür sorgen, dass diese Funktion wirklich existiert.