Więcej o HTML5 Canvas. Animacje, przykłady, narzędzia.

html5

Poziom średnio-zaawansowany

Witam! Pora na dalsze zgłębianie HTML5 Canvas, poprzez realizację kolejnych przykładów. Dziś nieco bardziej zaawansowane rzeczy, jak animacje i inne operacje graficzne.

HTML5 Canvas w przykładach

A zatem do dzieła.

Posłużymy się prostym szablonem strony HTML5, używanym w poprzednim artykule do uruchamiania przykładów.

Prosta animacja z użyciem HTML5 Canvas

Prosta, ponieważ zajmiemy się animowaniem (poruszaniem) jednego obiektu graficznego.

Tworząc animacje skorzystamy z funkcji JavaScript, takich jak setTimeout lub setInterval. Dodamy do tego wykonywanie operacji graficznych na elemencie HTML5 Canvas, w tym „rysowanie” na nim obiektów czy też czyszczenie obszaru (ctx.clearRect(0, 0, x, y)) w celu odświeżania obrazu.

Rozważmy następujący kod:


// ...
    
    function draw() {
        var canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        
        anim_img = new Image(size_x, size_y);
        
        // po wczytaniu obrazka rozpoczynamy animacje
        anim_img.onload = function() {
            setInterval('myAnimation()', 10);
        }
        
        anim_img.src = 'resources/ff_anim.png';
    }
    
    function myAnimation() {
        // najpierw czyscimy obszar
        ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
        
        // po dotarciu do krawedzi zmieniamy kierunek na przeciwny
        // czyli efekt odbicia od krawedzi
        if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
            stepX = -stepX;
        }
        
        if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
            stepY = -stepY;
        }
        
        // przesuwamy obrazek ...
        x_icon += stepX;
        y_icon += stepY;
        
        // i rysujemy w nowym miejscu
        ctx.drawImage(anim_img, x_icon, y_icon);
    }

// ...

Mamy tutaj dwie funkcje:

– draw() – główna funkcja wywoływana przy zdarzeniu onload dokumentu, która wykonuje operacje początkowe (swego rodzaju montaż),

– myAnimation() – funkcja pomocnicza, w której wykonuje się główna animacja; jest wywoływana co 10 [ms] w funkcji draw().

HTML5 Canvas: animacja

HTML5 Canvas: animacja

Do pobrania: przykład z komentarzami w kodzie.

Natomiast sam przykład działania można obejrzeć tutaj: HTML5 Canvas Animation Demo.

Tekst 3D

W poprzednim artykule znalazł się przykład wypisywania tekstu na HTML5 Canvas. Dziś krok dalej – tekst 3D.

// ...
    function draw() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        
        ctx.font = "60px Verdana";
        ctx.fillStyle = "black";
        
        ctx.textAlign = "center"; // wysrodkuj w poziomie
        ctx.textBaseline = "middle"; // w pionie
        
        render3dText(ctx, "Text 3D!", canvas.width / 2, 125, 6);
    }
    
    function render3dText(ctx, text, x, y, textDepth) {
        var i;
        for (i = 0; i < textDepth; i++) {
            ctx.fillText(text, x - i, y - i);
        }
        
        ctx.fillStyle = "#0094ed";
        ctx.shadowColor = "#000000";
        ctx.shadowBlur = 12;
        ctx.shadowOffsetX = textDepth + 2;
        ctx.shadowOffsetY = textDepth + 2;
        ctx.fillText(text, x - i, y - i);
    }

// ...

Różni się to nieco od wypisania zwykłego tekstu, głównie dodaniem rysowania dolnych warstw pod tekstem (dzieje się to wewnątrz pętli w funkcji render3dText()) oraz dodania cienia (shadow).

HTML5 Canvas: tekst 3D

HTML5 Canvas: tekst 3D

Pełny przykład: tutaj.

Teraz powiemy o operacjach na obrazkach.


Manipulowanie obrazkiem na elemencie HTML5 Canvas

W naszym przykładzie obrócimy obrazek o podany kąt. Można to zrobić dość prosto dzięki metodom takim jak translate() i rotate() udostępnianym przez kontekst elementu Canvas.

Przykład:

// ...

function draw() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
        
    var img_obj = new Image();
    img_obj.onload = function() {
        // ustawienie kontekstu na srodku elementu canvas ...
        ctx.translate(canvas.width / 2, canvas.height / 2);
            
        // i obrocenie o 45 stopni
        ctx.rotate(-1 * Math.PI / 4);
        ctx.drawImage(this, -1 * img_obj.width / 2, 
                            -1 * img_obj.height / 2);
    };

    img_obj.src = "res/html5_d.png";
}

// ...

Po wczytaniu obrazka przenosimy się na środek elementu Canvas, gdzie wykonujemy operację rysowania obróconego już obrazka:

HTML5 Canvas: manipulowanie obrazkiem

HTML5 Canvas: manipulowanie obrazkiem

Przykład do pobrania: tutaj.

Bardziej zaawansowane operacje są odpowiednio bardziej skomplikowane. I tutaj chciałbym przedstawić znakomitą bibliotekę, która upraszcza operacje graficzne na elemencie Canvas.

Bonus: biblioteka CamanJS

Twórcy tej biblioteki rozwijają jej nazwę jako „Canvas manipulation in Javascript”.

W założeniu dostarcza prostego w użyciu interfejsu to wykonywania zaawansowanych i efektywnych operacji graficznych na elemencie Canvas, jak i na wczytanych obrazkach.

Strona WWW projektu: http://camanjs.com/

Spójrzmy na podstawowy przykład użycia:

Caman('#my-image', function () {
    this.brightness(10);
    this.contrast(30);
    this.sepia(60);
    this.saturation(-30);

    this.render();
});

Cztery operacje graficzne w czterech linijkach kodu. Robi wrażenie gdy uświadomimy sobie, ile pracy mogłoby wymagać programowanie tego „ręcznie”.

Pokaz możliwości odnośnie obróbki grafiki z użyciem biblioteki CamanJS zaprezentowano na stronie z przykładami: http://camanjs.com/examples/ – jak widać biblioteka ta jest świetnym narzędziem.

Bardziej zaawansowane przykłady

Na koniec zasoby dla dociekliwych:

– dobry przykład implementacji animacji w HTML5 Canvas:

http://www.infragistics.com/community/blogs/graham/archive/2013/06/19/mastering-the-html5-canvas-part-1.aspx

– kolejna część z o wiele bardziej zaawansowanym przykładem implementacji animacji:

http://www.infragistics.com/community/blogs/graham/archive/2013/06/24/mastering-the-html5-canvas-part-2.aspx

– zbiór przykładów ukazujących moc i możliwości HTML5, Canvas i JavaScript:

http://www.1stwebdesigner.com/freebies/html5-demos/

Podsumowanie

Omówiliśmy kilka (mam nadzieję ciekawych) przykładów operacji graficznych na elemencie HTML5 Canvas. Jest to także absolutny elementarz tematu, jakim jest programowanie gier.

Póki co życzę miłej zabawy z programowym rysowaniem.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.