JavaScript und Canvas? Ok, let’s draw.
Die Leinwand
Als erstes brauchen wir ein Element auf dem wir malen können. Eine Leinwand, das Canvas-Element.
<canvas id="canvas" width="500" height="500">Ihr Browser kann leider kein Canvas!</canvas>
Das Element soll 500 Pixel breit und 500 Pixel hoch sein.
Die Koordinaten
Zu beachten ist die Richtung der Koordinaten.
Jeder Punkt in dem Canvas-Element wird durch eine X und eine Y Koordinaten dargestellt.
Dabei zählt X von links nach rechts, und Y von oben nach unten! 0:0 ist also die linke obere Ecke!
Das Canvas-Element muss in eine HTML-Datei verpackt werden, und damit wir unsere Datei im Browser später wieder erkennen fügen wir noch ein Title-Element hinzu. Das sieht dann so aus:
<html>
<head>
<title>Canvas-Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>
</body>
</html>
Die Datei öffnen wir im Browser, und wie wir sehen, sehen wir nichts. Das Canvas-Element ist unsichtbar weil noch nichts darauf gezeichnet wurde.
Der Hintergrund
Um das Element zu sehen müssen wir ihm eine Hintergrundfarbe verpassen. Dafür zeichnen wir ein Rechteck das unser gesamtes Element ausfüllt. Um dafür nicht die Breite und Höhe des Elements angeben zu müssen, holen wir uns diese Angaben einfach per JavaScript. Dann bestimmen wir die Farbe mit der unser Hintergrund gefüllt werden soll, und zeichnen das Rechteck.
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
c.fillStyle = 'rgb(200,200,200)';
c.fillRect(0,0,width,height);
Unser Rechteck beginnt bei den Koordinaten 0:0 für x und y, also ganz links oben. Es erstreckt sich bis zur Breite und Höhe des Canvas-Elements. Wenn wir das in unser HTML-Dokument einfügen sieht es so aus:
<html>
<head>
<title>Canvas-Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>
<script>
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
c.fillStyle = 'rgb(200,200,200)';
c.fillRect(0,0,width,height);
</script>
</body>
</html>
Öffnen wir die Datei jetzt im Browser, sehen wir schon mal unser Element. Ein graues Rechteck, 500 mal 500 Pixel groß.
Ein Text
Jetzt wird es Zeit wirklich was zu zeichnen. Zuerst einen Text. Dafür definieren wir einen Font (10px groß und Arial), eine Farbe (hier schwarz) und bestimmen an welchen Koordinaten der Text gezeichnet werden soll (ungefähr in die Mitte bei 200:200).
c.font = "10px Arial";
c.fillStyle = 'rgb(0,0,0)';
c.fillText("Hallo Welt!",200,200);
Das sieht dann in unserem HTML-Dokument so aus:
<html>
<head>
<title>Canvas-Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>
<script>
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
c.fillStyle = 'rgb(200,200,200)';
c.fillRect(0,0,width,height);
c.font = "10px Arial";
c.fillStyle = 'rgb(0,0,0)';
c.fillText("Hallo Welt!",200,200);
</script>
</body>
</html>
Ein Kreis
Zum Abschluss zeichnen wir noch eine etwas komplexere geometrische Form, einen Kreis. Den Kreis platzieren wir bei den Koordinaten 50:50 (x,y) und verpassen ihm einen Radius von 25 Pixeln (r). Mit Canvas ist es möglich Teilkreise zu zeichnen, dafür werden die Parameter Start-Winkel und End-Winkel angegeben. Da wir einen vollen Kreis zeichnen wollen, nehmen wir als Startwinkel 0 und als Endwinkel 2*PI. Der Kreis soll in schwarz gezeichnet werden, also definieren wir die Farbe noch, dann wird gezeichnet.
c.beginPath();
c.arc(50,50,25,0,2*Math.PI);
c.strokeStyle = 'rgb(0,0,0)';
c.stroke();
Durch die Koordinaten 50:50 und den Radius 25 berührt der Kreis die Ränder der Zeichenfläche.
In unserem HTML-Dokument sieht das dann so aus:
<html>
<head>
<title>Canvas-Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="50">Ihr Browser kann leider kein Canvas!</canvas>
<script>
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
c.fillStyle = 'rgb(200,200,200)';
c.fillRect(0,0,width,height);
c.font = "10px Arial";
c.fillStyle = 'rgb(0,0,0)';
c.fillText("Hallo Welt!",200,200);
c.beginPath();
c.arc(50,50,25,0,2*Math.PI);
c.strokeStyle = 'rgb(0,0,0)';
c.stroke();
</script>
</body>
</html>
Fazit
Was haben wir getan?
- eine Zeichenfläche erstellt (die Leinwand, das Canvas-Element)
- ein Rechteck gezeichnet (den Hintergrund)
- einen Text gezeichnet („Hallo Welt!“)
- einen Kreis gezeichnet (den oben links in die Ecke)
Damit haben wir einige grundlegende geometrische Formen und die Ausgabe von Text dargestellt. Das soll für einen ersten Ansatz reichen.
Was jetzt?
Jetzt seid Ihr dran!
Man könnte zum Beispiel eine Linie unter den Text zeichnen. Linien werden gezeichnet indem man einen Startpunkt definiert und von dort zum Zielpunkt malt.
c.beginPath();
c.moveTo(x,y);
c.lineTo(x,y);
c.stroke();
Wo die Linie hin soll? Unser Text steht bei den Koordinaten 200:200 und ist 10 Pixel hoch … Probiert es aus!
Weitere Informationen
Natürlich gibt es noch eine ganze Reihe weiterer Elemente die man in Canvas zeichnen kann. Etwas ausführlicher gibt es die hier gezeigten Formen unter:
Wer sehen möchte was man mit diesen Funktionen anstellen kann für den haben wir zwei Beispiele, einen einfachen Zeichenblock und ein kleines Spiel in dem ein Männchen gesteuert werden kann.
Viel Spaß beim ausprobieren!!!
https://www.w3schools.com/tags/ref_canvas.asp
https://wiki.selfhtml.org/wiki/JavaScript/Canvas
https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D