Artykuł
10/06/2011

Internet Explorer 9 - Canvas w HTML5

Autor: Marcin Borecki

Opublikowano: 2010-08-09

Wprowadzenie

Mechanizm Canvas jest nowym elementem HTML5, który służy do dynamicznego rysowania oraz modyfikowania grafik bitmapowych z wykorzystaniem skryptów w języku JavaScript. Przeglądarka Internet Explorer 9 operuje na obiekcie Canvas przy użyciu akceleracji sprzętowej procesora karty graficznej (GPU).

W tym artykule skupimy się na podstawowych informacjach o obiekcie Canvas, na jego programowaniu w JavaScript oraz stworzymy kilka przykładów jego użycia.

Obiekt Canvas

W kodzie strony deklaracja Canvas wygląda następująco:

<canvas id=”nazwa_elementu” width=”300” height=”300”></canvas>

Canvas ma tylko dwa atrybuty – width i height, które służą do określenia wielkości płótna. Nie są one wymagane – jeżeli ich nie podamy, płótno przybierze standardowy rozmiar 300x150 pikseli.
Obiekt może być stylowany tak samo jak każdy inny obraz, dlatego możemy przypisywać mu ramki, marginesy oraz tło.

Jeżeli chcemy stworzyć zawartość dla przeglądarek, które nie wspierają Canvas, możemy ją podać pomiędzy znacznikami (poniżej przykład):

<canvas id=”nazwa_elementu” width=”300” height=”300”>
    <div>Twoja przeglądarka nie obsługuje Canvas</div>
</canvas>

lub

<canvas id=”nazwa_elementu” width=”300” height=”300”>
    <img src=”obrazek.jpg alt=”statyczny obraz” />
</canvas>

Przykład ten pokazuje, że zawartość serwowana użytkownikowi, który posiada przeglądarkę nieobsługującą płótna, może przybrać dowolną zawartość – od tekstu po statycznie wygenerowany obraz.

Podstawy obsługi płótna w JavaScript

Canvas, w zależności od przeglądarki, udostępnia jeden do dwóch kontekstów, które mogą nam posłużyć do generowania grafiki. Standard HTML5 opisuje jedynie kontekst 2d, lecz niektórzy producenci przeglądarek internetowych eksperymentują już z kontekstami 3d. W tym artykule skupimy się na kontekście 2d, który jest zaimplementowany z przeglądarce Internet Explorer 9.

Poniżej znajduje się szkielet strony, w której jest obiekt płótna wraz z skryptem pobierającym kontekst 2d:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function Draw() {
                var plotno = document.getElementById('plotno');
            if (plotno.getContext) {
                     var kontekst = plotno.getContext('2d');
                     //operacje na płótnie
                }
        }
    </script>
</head>
<body onload="Draw()">
    <canvas id="plotno" width="300" height="300">
    </canvas>
</body>
</html>

getElementById	Służy nam do znalezienia w kodzie strony obiektu Canvas o nazwie plotno.
getContext	W instrukcji warunkowe służy do wykrycia, czy przeglądarka obsługuje Canvas.
getContext(‘2d’)	Służy nam do pobrania kontekstu 2d płótna.

Kolory ramek i wypełnienia

Obiekty rysowane przy użyciu płótna mogą mieć nadany kolor ramki i/lub kolor wypełnienia kształtu.

Kolor ramki określamy przy użyciu funkcji strokeStyle i określeniu barwy przy użyciu składowych RGB.

kontekst.strokeStyle = "rgb(10, 20, 30)";

Kolor ramki określamy przy użyciu funkcji fillStyle i określeniu barwy przy użyciu składowych RGB.

kontekst.fillStyle = "rgb(10, 20, 30)";

Kolor ramki i kolor wypełniania możemy określić przed przystąpieniem do rysowania kształtu.

Rysowanie prostokątów

Do narysowania prostokątów używamy funkcji fillRect lub strokeRect, uruchomionych bezpośrednio na kontekście 2d płótna.

kontekst.fillRect(100, 200, 145, 145);
kontekst.strokeRect(50, 20, 145, 145);

**
Prostokąty**

W parametrach podajemy punkt startowy X, Y oraz szerokość i wysokość obiektu:

fillRect	Służy do rysowania prostokątów, które posiadają kolor wypełnienia – domyślnie jest to kolor czarny.
strokeRect	Służy do rysowania prostokątów, które są nakreślone kolorową ramką – domyślnie jest to kolor czarny.

Rysowanie okręgów

Do narysowania okręgów używamy funkcji arc, uruchomionej bezpośrednio na kontekście 2d płótna.

Poniżej znajduje się przykład rysowania okręgu z kolorem wypełnienia:

kontekst.beginPath();
kontekst.fillStyle = "rgb(0, 162, 232)";
kontekst.arc(198, 158, 70, 0, 2*Math.PI, true);
kontekst.fill();

**
Z wypełnieniem.**

Poniżej znajduje się przykład narysowania okręgu posiadającego jedynie obramowanie:

kontekst.beginPath();
kontekst.strokeStyle = "rgb(0, 0, 0)";
kontekst.arc(100, 100, 80, 0, 1.5*Math.PI, false);
kontekst.stroke();

**
Bez wypełnienia.**

beginPath	Rozpoczyna rysowanie kształtu na płótnie.
arc	Rozpoczyna rysowanie okręgu, którego parametrami są punkt startowy X, Y, promień, kąt startowy, kąt końcowy oraz flaga odznaczająca rysowanie okręgu zgodnie ze wskazówkami zegara (true/false).
stroke	Narysowanie obiektu zdefiniowanego wcześniej z obramowaniem.
fill	Narysowanie obiektu zdefiniowanego wcześniej i posiadającego wypełnienie.

Rysowanie krzywych Beziera

Do narysowania krzywej Beziera używamy funkcji bezierCurveTo, uruchomionej bezpośrednio na kontekście 2d płótna.

kontekst.beginPath();
kontekst.moveTo(10, 10);
kontekst.bezierCurveTo(100, 30, 100, 30, 100, 210);
kontekst.stroke();

**
Krzywa**

beginPath	Rozpoczyna rysowanie kształtu na płótnie.
moveTo	Przesuwa pędzel do odpowiedniego piksela.
bezierCurveTo	Podajemy dwa punkty pośrednie pp1X, pp1Y oraz pp2X i pp2Y oraz punktu do ścieżki X oraz Y.
stroke	Narysowanie obiektu zdefiniowanego wcześniej z obramowaniem.

Rysowanie linii

Do narysowania linii używamy funkcji lineTo, uruchomionej bezpośrednio na kontekście 2d płótna:

kontekst.beginPath();
kontekst.moveTo(55, 55);
kontekst.lineTo(100, 100);
kontekst.stroke();

**
Linia**

beginPath	Rozpoczyna rysowanie kształtu na płótnie.
moveTo	Przesuwa pędzel do odpowiedniego piksela.
lineTo	Podajemy dwa punkty X oraz Y zakończenia linii. Linia będzie rysowana od punktu, gdzie aktualnie znajduje się pędzel.
stroke	Narysowanie obiektu zdefiniowanego wcześniej z obramowaniem.

Przykład

Poniżej znajduje się przykład gotowy do wklejenia na stronę internetową, prezentujący zarówno możliwości obiektu Canvas, jak i wiadomości zdobyte w tym artykule:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        
        function Draw() {
var plotno = document.getElementById('plotno');
        if (plotno.getContext) {
             var kontekst = plotno.getContext('2d');
             //określamy domyślny kolor ramki
             kontekst.strokeStyle = "rgb(10, 20, 30)";

            //określamy domyślny kolor wypełnienia
            kontekst.fillStyle = "rgb(30, 50, 80)";

            //rysujemy kwadrat
            kontekst.fillRect(100, 200, 145, 145);
            kontekst.strokeRect(50, 20, 145, 145);

            //rysujemy okrąg z wypełnieniem
            kontekst.beginPath();
            kontekst.fillStyle = "rgb(0, 162, 232)";
            kontekst.arc(198, 158, 70, 0, 2*Math.PI, true);
            kontekst.fill();

            //rysujemy okrąg z ramką
            kontekst.beginPath();
            kontekst.strokeStyle = "rgb(0, 0, 0)";
            kontekst.arc(123, 408, 80, 0, 1.5*Math.PI, false);
            kontekst.stroke();

            //rysujemy krzywą beziera
            kontekst.beginPath();
            kontekst.moveTo(219, 298);
 
            kontekst.bezierCurveTo(278, 351, 315, 315, 277, 258);
            kontekst.stroke();

            //rysujemy linię
            kontekst.beginPath();
            kontekst.moveTo(55, 55);
            kontekst.lineTo(100, 100);
            kontekst.stroke();
        }
}
    </script>
</head>
<body onload=”Draw()”>
    <canvas id="plotno" heigh=”500” width=”500”>
    </canvas>
</body>
</html>

Efekt końcowy powinien wyglądać następująco:

**
Kombinacja kształtów.**

Podsumowanie

Standard HTML5 wprowadza potężne narzędzie umożliwiające generowanie grafiki 2d dla stron internetowych w dynamiczny sposób. Akceleracja sprzętowa, którą dostarcza przeglądarka Internet Explorer 9, dodatkowo przyśpiesza efekt końcowy, jaki będzie mógł obserwować użytkownik. Ze względu na coraz lepszy sprzęt, jakim dysponują użytkownicy, twórcy stron mogą przesunąć część odpowiedzialności za generowanie strony internetowej właśnie na nich, oszczędzając swoje zasoby.