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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Vorwort

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details