Animowane tło elementu przy użyciu CanvasContext

Przeglądarki oparte na silniku WebKit (czyli Chrome, Safari i duża grupa mobilnych) umożliwiają rysowanie tła elementu tak samo jak w przypadku elementu <canvas>. Prosty dostęp do funkcji umożliwiających rysowanie tła wraz z możliwością jego powtarzania (w końcu to standardowe tło) znacznie ułatwia implementacje niektórych animacji.

W celu zdefiniowania tła jako element z dostępnym kontekstem canvas musimy podać w CSS specjalną definicję, w której definujemy dodatkowy identyfikator:

#element {

   background: -webkit-canvas(elementy);

}

Następnie możemy odwołać się do elementu i pobrać kontekst:

w = 210; // szerokość
h = 110; // wysokość
var ctx = document.getCSSCanvasContext("2d", "elementy", w, h);

Kolejnym krokiem jest już tylko narysowanie odpowiednich grafik i ich animowanie:

function anim() {
   this.ctx = ctx;
   this.w = 100;
   this.diff = -1;

   this.step = function() {
      if (this.w < 100 || this.w > 200) {
         this.diff = -this.diff;
      }

      this.w += this.diff;
      this.ctx.clearRect(10,10,200,100);
      this.ctx.fillStyle = 'yellow';
      this.ctx.fillRect(10,10,this.w, 100);

   }
}

(function() {
   var obj = new anim();
   var step = function(){
      obj.step();
      requestAnimationFrame(step);
   };
   step();
})();

A oto działający przykład wraz z wszystkimi elementami:


Główną zaletą takiego rozwiązania jest przede wszystkim to, że tło możemy powielać - co może być szczególnie przydane w przypadku gier komputerowych (publikowanych np. na Google Chrome Store - bo omówiona technologia raczej nie działa na FF czy Operze, o IE nie wspominając).