HTML5 - Multimedia-Inhalte - Canvas
1. Eigentlich
... ist <canvas> kein Multimedia-Element, sondern nur ein Container für selbige. Dazu gehören
- Bilder
- Videos
- SVG-Grafiken
- Text
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Jetzt werden sich sicher einige fragen, wozu man das braucht. Ganz einfach, man kann per JavaScript nach Herzenslust damit herumspielen und ziemlich verrückte
(oder sinnvolle) Dinge machen. Da das aber recht wenig mit HTML5 zu tun hat, beschränke ich mich auf eine kleinere Spielerei, um euch im Ansatz die
Möglichkeiten zu zeigen, die <canvas> bietet. Später wird es dazu ein eigenes Tutorial geben.
2. Ein Beispiel
Stell den Peter auf den Kopf
Einfach ein paar Mal auf den Button klicken und zusehen, wie mir schwindlig wird.
<canvas id="canvas" width="200" height="200"></canvas><br /><br />
<button id="dreh">Peter drehen</button>
<script type="text/javascript">
window.onload = function() {
document.getElementById("dreh").onclick = function() {
var canvas = document.getElementById('canvas');
var img = new Image();
img.src = '../../pics/common/404.jpg';
var context = canvas.getContext('2d');
context.translate(200, 0);
context.rotate(90 * Math.PI/180);
context.drawImage(img, 0, 0, 200, 200);
}
}
</script>
Erläuterung
Mit var canvas = document.getElementById('canvas'); legen wir eine Referenz auf unser <canvas>-Element fest. Im Anschluss
erzeugen wir ein Bild und "laden" es. Bis hierhin also nichts Besonderes.
Dann legen wir den "Modus" für <canvas> mit var context = canvas.getContext('2d'); fest. Im Moment gibt es nur 2D, es ist
aber auch schon 3D in Planung. Und dann erst beginnt die eigentliche Manipulation. translate definiert die Koordinate, rotate
dreht dann den Inhaltsbereich und mit drawImage wird dann letztendlich das Bild in die Fläche gemalt.
3. Ein Hinweis noch
Eigentlich scheint die Vorgehensweise doch nicht optimal zu sein. Oder anders gefragt, warum bindet man das Bild nicht direkt in das Canvas-Element ein? Ganz einfach. Der Platz ist reserviert für die Inhalte, die angezeigt werden, wenn der Browser das neue Tag nicht kennt. Darum muss auch die komplette Verarbeitung mit JavaScript erfolgen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt