Zeit für HTML5



Es wird Zeit! HTML5 rückt immer näher. Viele Browser unterstützen bereits wesentliche Aspekte des neuen Standards und auch Microsoft wird mit dem IE9 bald zum restlichen Feld aufschließen. Die Suche im Netz nach HTML5 liefert bereits jetzt dutzende Beispiele, was demnächst alles im Browser möglich sein wird. Und das ist allerhand! Google hat eine nette Seite eingerichtet, wo man sich von der Mächtigkeit von HTML5 selbst überzeugen kann.

Nun habe ich entschlossen, mich auch etwas mit Canvas, Video, CSS3 & Co. zu beschäftigen. Da ich im Moment jedoch nicht sehr viel Zeit habe, heißt es: kleine Schritte machen 😉 Und was kann es besseres als eine Uhr geben, wenn man keine Zeit hat! Das Ergebnis sollte hier bereits am Anfang des Artikels aufgefallen sein…sofern man einen Browser besitzt, der bereits das Canvas-Objekt unterstützt. Aussehen sollte das ganze ungefähr so:

Eine Uhr mit HTML5 Canvas

Die Uhr besteht also im wesentlichen aus drei Kreisen, die von innen nach außen für die Stunden, Minuten und Sekunden stehen. Realisiert wird das ganze mittels eines kleinen JavaScripts und dem Canvas-Objekt.

  1. <canvas id="clock" width="120" height="120"/>

In das Canvas-Objekt werden nun die drei Kreise entsprechend der Uhrzeit gezeichnet. Das passiert alle 1000 Millisekunden, also jede Sekunde. Dafür setzen wir einfach nach dem Laden der Seite ein Intervall, welches nun regelmäßig alles neu zeichnet.

  1. <script type="text/javascript">
  2.  
  3. if ( window.addEventListener ) {
  4.   addEventListener( "load", window.setInterval('update()',1000), false );
  5. } else {
  6.   attachEvent( "onload", window.setInterval('update()',1000) );
  7. }
  8.  
  9. function update(){
  10.   var canvas = document.getElementById("clock");
  11.  
  12.   if (canvas.getContext) {
  13.     canvas = canvas.getContext("2d");
  14.  
  15.     // Einmal den Bildschirm leeren bitte
  16.     canvas.clearRect (0, 0,  124, 124);
  17.  
  18.     // Die aktuelle Zeit abfragen
  19.     date    = new Date();
  20.     hours   = date.getHours();
  21.     minutes = date.getMinutes();
  22.     seconds = date.getSeconds();
  23.  
  24.     // Ein Rahmen
  25.     canvas.lineWidth = 1;
  26.     canvas.strokeStyle = "rgb(2,22,32)";
  27.     canvas.beginPath();
  28.     canvas.arc( 60, 60, 60, 0, 2 *Math.PI, false);
  29.     canvas.stroke();
  30.        
  31.     // Die Stärke der Linien bestimmen.
  32.     canvas.lineWidth = 20;
  33.  
  34.     // Die Sekunden
  35.     canvas.strokeStyle = "rgb(8,18,27)";
  36.     canvas.beginPath();
  37.     canvas.arc( 60, 60, 50, 3/2 * Math.PI, seconds/60 * 2 *Math.PI + 3/2 * Math.PI, false);
  38.     canvas.stroke();
  39.  
  40.     // Die Minuten
  41.     canvas.strokeStyle = "rgb(11,86,126)";
  42.     canvas.beginPath();
  43.     canvas.arc( 60, 60, 30, 3/2 * Math.PI, minutes/60 * 2 *Math.PI + 3/2 * Math.PI, false);
  44.     canvas.stroke();
  45.  
  46.     // Die Stunden
  47.     canvas.strokeStyle = "rgb(7,56,86)";
  48.     canvas.beginPath();
  49.     canvas.arc( 60, 60, 10, 3/2 * Math.PI, (hours-12)/6 * Math.PI + 3/2 * Math.PI, false);
  50.     canvas.stroke();
  51.   }
  52. }
  53.  
  54. </script>

Wie man sieht, ist es gar nicht schwer. Zuerst wird für jeden Kreis eine neue Farbe definiert. Danach wird ein Kreisbogen mittels der Funktion arc gezeichnet, welche Parameter für x, y, Radius, Startwinkel, Endwinkel und die Zeichenrichtung (im oder gegen den Uhrzeigersinn) entgegennimmt. beginPath() und stroke() sorgen schließlich dafür, dass genau an dem durch den Kreisbogen definierten Pfad eine Linie gezeichnet wird.

Mit dem Canvas-Objekt ist natürlich einiges mehr möglich – das hier ist erst der Anfang der schönen neuen HTML5-Welt 😉

2 Gedanken zu „Zeit für HTML5

    • alex sagt:

      Richtig, das funktioniert dank des neuen Video-Tags und dem entsprechenden Codec. Flash hat aber dennoch auch in Zukunft seine Berechtigung, da es ja wesentlich mehr ist als nur ein Video-Player 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.