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 (Naja, außer einem gelben Rechteck ist da nicht viel zu sehen):
Ü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
JavaScript - Zeichnung erstellen
Weitere Informationen zu Canvas finden Sie im Web unter den folgenden Adressen:
HTML 5 Canvas (w3schools.com)
CanvasRenderingContext2D (developer.mozilla.org/en).