HTML5 Canvas Tutorial
Das Canvas-Element – das Element für unsere Spielfläche
Die Spielfläche wird mit dem HTML-Element canvas aufgebaut. Canvas kommt nicht von „Kann etwas“ sondern von dem englischen „Leinwand“. Wir haben also eine Zeichenfläche (unser Spielbrett), die eine Höhe und eine Breite als Angabe benötigt.
Was kann Canvas?
Auf der Zeichenfläche Canvas kann:
- Linien gezeichnet werden
- Rechteckzeichenfunktionen
- Kreisbögen
- Bézierkurven
- Farbverläufe
- Images - Grafiken (PNG, GIF, JPG)
- Transparenz
- Text
Canvas in HTML integrieren
Als erstes packen wir ein canvas-Element in ein Standard-HTML-Grundgerüst und geben diesem neben einer Breite und Höhe noch einen eindeutigen Namen mit:
<canvas id="leinwand" width="600" height="300"></canvas>
Nun komplett mit HTML5-Grundgerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Tutorial</title>
<meta name="description" content="Kurzbeschreibung">
<link href="design.css" rel="stylesheet">
</head>
<body>
<h1>HTML5 Canvas Tutorial</h1>
<canvas id="leinwand"></canvas>
</body>
</html>
Welche Browser (ab welcher Version) unterstützen Canvas
Und zu guter Letzt die Rückwärtskompatibilität. Canvas wurde ursprünglich von Apple im Rahmen von WebKit entwickelt und dann in HTML5 aufgenommen. Wir können Canvas ab der Version des Internet Explorers 9 problemlos verwenden. Firefox ab Version 3.6, Safari ab 3.2, Chrome ab Version 14 und der Android Browser ab Version 2.2. Also ein Element, dass sehr gut unterstützt wird.
Größe Canvas
Und nun noch die Größe und eine Umrandung, damit wir unser Canvas-Element auch sehen. Diese sollte bei unserem HTML-Befehl mitgegeben werden. Wird die Größe über CSS definiert (was im ersten Gedanken logischer erscheint) kann es bei verschiedenen Browsern zu unschönen Effekten und Größenprobleme kommen.
<canvas id="leinwand" width="600" height="300"></canvas>
Wir könnten auch bei der Breite und Höhe Prozente mitgeben, aber zum einfacheren Verständnis arbeiten wir erst einmal mit absoluten Angaben – sprich für unser Beispiel mit einer Breite von 600 Pixel und einer Höhe von 300 Pixel.