Beispiel: Animiertes Säulendiagramm mit HTML Canvas

JavaScript Quelltext

// Animiertes Säulendiagramm mit HTML Canvas

var bc = {
   canvas   : null,  // Canvas Element
   ctx      : null,  // 2D-Grafikkontext vom Canvas

   values   : [87, 70, 90, 50, 105, 120, 75, 83, 110, 76, 100, 120], // Angezeigte Werte
   barWidth : 30,        // Breite der Balken
   barFill  : null,      // Farbverlauf für Säulen
   backgroundFill: null, // Farbverlauf für Hintergrund

   scale    : 0,         // Skalierungsfaktor während der Animation
   duration : 1.5,       // Dauer der Animation in Sekunden
   fps      : 25,        // Anzahl der Bilder pro Sekunde
   startTime: 0,         // Startzeitpunkt der Animation
   timer    : null,      // JavaScript Timer


   init: function() {
       bc.canvas = document.getElementById('canvas');
       if(bc.canvas && bc.canvas.getContext) {
           bc.ctx = bc.canvas.getContext('2d');


           // Farbverläufe
           bc.barFill = bc.ctx.createLinearGradient( 0, 0, 0, 120);
           bc.barFill.addColorStop(0.0, 'deepskyblue');
           bc.barFill.addColorStop(1.0, 'lightcyan');

           bc.backgroundFill = bc.ctx.createLinearGradient( 0, 0, 0, bc.canvas.height);
           bc.backgroundFill.addColorStop(0.0, '#808080');
           bc.backgroundFill.addColorStop(1.0, 'white');


           // Start
           bc.animStart();
       }
   },


   draw: function() {
       // Hintergrund zeichnen
       bc.ctx.fillStyle = bc.backgroundFill;
       bc.ctx.fillRect(0, 0, bc.canvas.width, bc.canvas.height);


       // Status retten und Ursprung nach unten verschieben
       // sowie Koordinaten an der x-Achse spiegeln
       bc.ctx.save();

       bc.ctx.translate(20, bc.canvas.height - 30);
       bc.ctx.scale(1, -1);


       // Säulen zeichnen
       for(var i = 0; i < bc.values.length; i++) {
           bc.ctx.fillStyle = bc.barFill;
           bc.ctx.fillRect(i * (bc.barWidth + 10), 0, bc.barWidth, bc.scale * bc.values[i] );
       }

       // Alten Status wiederherstellen
       bc.ctx.restore();
   },


   animate: function() {
       var diffTime = new Date().getTime() - bc.startTime;

       // Skalierungsfaktor (0.0 bis 1.0) für Säulen berechnen
       bc.scale = diffTime / (1000 * bc.duration);

       // Ende?
       if(diffTime >= 1000 * bc.duration) {
           bc.scale = 1.0; // Auf 1.0 setzen, damit die Säulen am Schluss mit
                           // Sicherheit mit dem richtigen Wert gezeichnet werden
           clearInterval(bc.timer);

           // Neustart nach 2 Sekunden
           setTimeout(bc.animStart, 1000 * 2);
      }

      bc.draw();
   },


   animStart: function() {
       bc.startTime = new Date().getTime();
       bc.timer = setInterval(bc.animate, 1000 / bc.fps);
   }
};

window.onload = bc.init;

HTML Quelltext

<canvas id="canvas" width="510" height="200">
  <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter
  <a href="http://de.wikipedia.org/wiki/Canvas_(HTML-Element)">HTML Canvas</a>-Unterstützung.</p>
</canvas>

<noscript>
  <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter
  <a href="http://de.wikipedia.org/wiki/JavaScript">JavaScript</a>-Unterstützung.</p>
</noscript>