Mit JavaScript und Canvas zeichnen

Mit JavaScript und Canvas können Sie alle Arten von Grafiken zeichnen von einfachen Linien bis zu komplexen grafischen Objekten, durch JavaScript sind sogar Animationen möglich. Diese kleine Anleitung vermittelt die Grundlagen die für die Erstellung von Grafiken mit JavaScript benötigt werden.

Zeichenfläche erstellen

Zuerst benötigen wir eine Leinwand (Zeichenfläche) auf der gezeichnet werden soll, diese legen wir mit CSS fest.

<style>
canvas#leinwand {
 width: 400px;
 height: 90px;
 border: Solid 1px Lightgrey;
 background-color: Ivory;
 display: Block;
}
</style>

Als Container der diese Leinwand aufnehmen soll, verwenden wir das HTML 5-Element <canvas>, dieses verbinden wir nun mit der CSS-Anweisung über: id="leinwand" miteinander.

<canvas id="leinwand"></canvas>

Das Ergebnis sieht dann so aus:

Über JavaScript erstellen wir nun auch eine Verbindung zu der Leinwand, das machen wir mit:
var leinwand = document.getElementById('leinwand').getContext('2d');

<script>
var leinwand = document.getElementById('leinwand').getContext('2d');
</script>

Nun sind die Vorbereitungen abgeschlossen und wir können mit dem Zeichnen beginnen.

Rechteck zeichnen

<canvas id="leinwand"></canvas>

<script>
var leinwand = document.getElementById('leinwand').getContext('2d');

// Mit 'fillStyle' wird die Farbe gesetzt (Farbname)
leinwand.fillStyle = "Deepskyblue";

// Mit 'fillRect' wird das Rechteck erzeugt
leinwand.fillRect(15, 10, 100, 50);
</script>

Für: fillRect(15, 10, 100, 50); benötigen wir folgende Werte:
15 = Position von links
10 = Position von oben
100 = Breite des Rechtecks
50 = Höhe des Rechtecks

Kreis zeichnen

Um einen Kreis zu zeichnen ist etwas mehr Aufwand nötig.

<canvas id="leinwand"></canvas>

<script>
var leinwand = document.getElementById('leinwand').getContext('2d');

// Mit 'fillStyle' wird die Farbe gesetzt (Hexadezimal)
leinwand.fillStyle = "#FFD700";

leinwand.beginPath();
// Mit 'arc' wird der Kreis erzeugt
leinwand.arc(50, 60, 40, 0,2 * Math.PI);
leinwand.fill();
</script>

Für: arc(50, 60, 40, 0,2 * Math.PI); benötigen wir folgende Werte:
50 = Position von links
60 = Position von oben
40 = Radius
0,2 * Math.PI = Berechnung des Kreises

Linien zeichnen

<canvas id="leinwand"></canvas>

<script>
var leinwand = document.getElementById('leinwand').getContext('2d');

// Mit 'strokeStyle' wird die Farbe gesetzt (Hexadezimal)
leinwand.strokeStyle = "#F08080";

leinwand.beginPath();
leinwand.moveTo(10, 20);
leinwand.lineTo(100, 20);
leinwand.lineWidth = 10;
leinwand.stroke();
</script>

Um das Objekt an eine bestimmte Stelle zu setzen verwenden Sie: moveTo(10, 20);
10 = Position von links
20 = Position von oben

Um eine Linie zu zeichnen verwenden Sie: lineTo(100, 20);
100 = Länge der Linie
20 = Grad (Ausrichtung)

Um die Höhe der Linie zu setzen verwenden Sie: lineWidth = 10;

Grafik hinzufügen

<canvas id="leinwand"></canvas>

<script>
var leinwand = document.getElementById('leinwand').getContext('2d');
var img = new Image();
img.src = 'img/apfel.gif';

window.onload = function() {
 leinwand.drawImage(img, 50, 20, 47, 59);
}
</script>

Mit: var img = new Image(); erzeugen Sie ein neues IMG-Objekt und mit: img.src = 'img/apfel.gif'; setzen Sie den Pfad zur Grafik.

Mit: leinwand.drawImage(img, 50, 20, 47, 59); positionieren Sie die Grafik auf der Leinwand.
50 = Position von links
20 = Position von oben
47 = Breite der Grafik
59 = Höhe der Grafik

Text schreiben

<canvas id="leinwand"></canvas>
<script>
var leinwand = document.getElementById('leinwand').getContext('2d');

// Mit 'strokeStyle' wird die Schriftarbe gesetzt (Hexadezimal)
leinwand.strokeStyle = "#2BAE2B";

leinwand.font = "27px Tahoma";
leinwand.strokeText("Hallo Welt!", 25, 50);
</script>

Mit: leinwand.font = "27px Tahoma"; setzen Sie die Schriftgröße und die Schriftart. Mit: leinwand.strokeText("Hallo Welt!", 25, 50); wird der Text auf die Leinwand geschrieben.

Tipps

Weitere Informationen zu Canvas finden Sie im Web unter den folgenden Adressen:

HTML 5 Canvas (w3schools.com)

CanvasRenderingContext2D (developer.mozilla.org/en).