Canvas, czyli grafika z przeglądarki. Część pierwsza: 7 kroków do opanowania podstaw

Jedną z nowości HTML5 jest element <canvas>. To pole, w którym za pomocą JavaScriptu (i całkowicie niezależnie od zewnętrznych wtyczek) można tworzyć grafiki dwu- i trójwymiarowe, a nawet animacje. Dziś z wykorzystaniem <canvas> powstają już nawet gry – my na razie pokażemy Wam, jak utworzyć prostą grafikę na potrzeby strony WWW.

1. Pierwsza grafika

Aby utworzyć obrazek, wystarczy umieścić w kodzie następujący znacznik:

<canvas id="obrazek" width="300" height="150">
Twoja przeglądarka nie obsługuje Canvas.
</canvas>

Treść zawarta pomiędzy znacznikami jest wyświetlana w przeglądarkach nieobsługujących elementu canvas. Inne browsery za sprawą poniższego kodu JavaScript (jeśli nie wiesz, jak osadzać kod, skorzystaj z tego kursu) wyświetlają naomiast grafikę.

var context = document.getElementById('obrazek').getContext('2d');
if (context) {
 // teraz możemy rysować!
 context.fillRect(0, 0, 150, 100);
}

Powyższy kod najpierw znajduje odniesienie do zawartości dwuwymiarowej umieszczonego uprzednio elementu canvas i umieszcza je w zmiennej context. Za jej pomocą odbywa się wszelkie rysowanie. W przykładzie narysowano wypełniony na czarno prostokąt, umieszczony we współrzędnych (0,0) i o wielkości 150x100 pikseli.

2. Linie i kształty

Aby rozpocząć dodawanie konkretnych kształtów do obrazka, należy najpierw określić kolor dla wypełnień i obramowań. Ponieważ rysowanie kształtów odbywa się w kolejności, w której instrukcje występują w kodzie, logicznym wydaje się, by zdefiniować kolor przed rysowaniem elementów.

context.fillStyle   = '#00f'; // blue
context.strokeStyle = '#ff0000'; // red
context.lineWidth   = 4;

Powyższe właściwości określają kolejno kolor i wypełnienie linii, a także ich grubość.

Do rysowania kształtów wykorzystywane są następujące funkcje:


context.fillRect  (0,   0, 150, 50); //wypełniony prostokąt
context.strokeRect(0,  60, 150, 50); //prostokąt z obwodką
context.clearRect (30, 25,  90, 60); //pusty prostokąt

3. Wielokąty

Pole canvas pozwala także na rysowanie wielokątów. Wystarczy wyłącznie określić kolory i podawać serie współrzędnych kolejnych punktów. Ponieważ funkcja beginPath() ustawia kursor w polu (0,0) (górny, lewy wierzchołek pola canvas), zazwyczaj należy go przenieść w wybrane miejsce z wykorzystaniem funkcji moveTo().

Bezpośrednio przed zakończeniem rysowania wielokąta można go albo wypełnić, albo narysować samą linię - bez tego wielokąt nie będzie widoczny.

context.fillStyle   = '#f0f';
context.strokeStyle = '#ff0';
context.lineWidth   = 4;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.fill(); //rysuje wypełnienie
context.stroke(); //rysuje obramowanie
context.closePath();

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

8 skomentuj »

Komentarze

#1 dav 2010-03-15 16:56:36 0
juz od kilku lat mozna za pomoca js tworzyc dynamiczna grafike w SVG, wiec zadna to nowosc a jedynie wynajdowanie koła na nowo. Oczywiscie IE nie wspiera zarówno SVG jak i HTML5...
IP: 91.197.12.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.1.8) Gecko/20100214 Ubuntu/9.10 (karmic) Firefox/3.5.8
#2 dAREuS^® 2010-03-15 19:16:52 0
Tylko że SVG jakoś się nie przyjęło, więc pewnie dlatego próbuje się stworzyć kolejną alternatywę dla Flasha.
IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
#3 invictus™ 2010-03-15 20:16:04 0
Microsoft oznajmił, że jego przedstawiciele przystąpią do SVG Working Group artykuł Microsoft stawia na SVG na webhosting.pl
IP: 80.51.57.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.18) Gecko/2010021501 Ubuntu/9.04 (jaunty) Firefox/3.0.18
#4 dAREuS^® 2010-03-15 20:50:41 0
Tutaj dobry link: http://webhosting.pl/microsoft.stawia.na.svg.na.mix10.pokaze.przyszlosc.grafiki.wektorowej.w.sieci
IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
#5 invictus™ 2010-03-16 08:29:39 0
@dAREuS® Dzięki za poprawienie linku.

Ale nie mogę się zgodzić ze sformułowaniem "SVG, czy Canvas jest alternatywę dla Flasha" Alternatywą dla flash'a może być korzystanie np. z bibliotek Papervision 3D. A dla SVG, Canvas biblioteka GD.

Moim zdaniem 'SVG, Canvas, Papervision 3D' to fajna monofaktura. Dopóki te projekty nie będą opakowane w WYSIWYG - czyli działający wedle zasady "widzisz co robisz" odejdą do krainy niebytu.
IP: 80.51.57.[...] Mozilla/5.0 (Windows; U; Windows NT 5.0; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#6 dav 2010-03-16 10:40:55 0
@ invictus: grafike SVG mozesz tworzyc w Inkscape, Adobe AI, Corel, OO Draw i innych edytorach, a nastepnie eksportowac i wklejac do weba, wiec jest to juz od dawna standardowy format i ma całkiem niezłe WYSIWYG...
IP: 91.197.12.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.1.8) Gecko/20100214 Ubuntu/9.10 (karmic) Firefox/3.5.8
#7 invictus™ 2010-03-16 15:38:43 0
@dav mea kulpa, mea kulpa, mea maks-ima kulpa

Mam takie pytanie. Do tworzenia grafiki w formacie SVG można użyć dowolnego edytora tekstowego ponieważ format SVG jest aplikacją XML. To czy jak stworzymy za pomocą Adobe AI dowolny plik svg to czy będzie można edytować go za pomocą dowolnego edytora tekstowego?
IP: 80.51.57.[...] Mozilla/5.0 (Windows; U; Windows NT 5.0; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#8 dav 2010-03-17 09:56:32 0
@invictus™: oczywiscie ze mozna edytowac SVG nawet w notatniku, ale skomplikowany rysunek wektorowy moze miec nawet kilkaset linii kodu XML :) Ale ogólnie jest to naprawde przyjemny otwarty format, dlatego M$ się go wystrzega jak ognia. Natomiast np. w KDE wiekszość grafiki pulpitu i ikon jest w formacie SVG...
IP: 91.197.12.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.1.8) Gecko/20100214 Ubuntu/9.10 (karmic) Firefox/3.5.8

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.