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).
Brak komentarzy:
Prześlij komentarz