Login lub e-mail Hasło   

Canvas - pierwsze kroki…

Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 - czyli czym jest canvas? Ok, na początek zobaczmy jak wygląda ten nowy i ta...
Wyświetlenia: 5.211 Zamieszczono 13/03/2007

Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 - czyli czym jest canvas?

Ok, na początek zobaczmy jak wygląda ten nowy i tajemniczy element <canvas>:

<canvas id="pierwszy_przyklad"

width=”150″ height=”150″></canvas>

Element Canvas posiada tylko dwa atrybuty; są nimi height i width. W powyższym przykładzie użyliśmy ich, ale w rozmiarach jakie sami chcieliśmy nadać naszej grafice. Są one opcjonalne i mogą być również określane jako własności DOM lub zasady CSS. Kiedy atrybuty wysokości i szerokości nie są określone, to wtedy obiekt <canvas> będzie posiadał wielkości domyślne czyli; 300 pikseli długości i 150 pikseli wysokości.

Elementu <canvas> możemy nadać takie same style jak normalne; obrazy (margines, obramowanie, tło, itd.). Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.

Narysujmy, więc coś…

Wykonajmy nasz pierwszy rysunek za pomocą elementu canvas. Tworzymy pierwszą stronę, która będzie zawierała nasz powyższy kod elementu canvas, lecz samo wstawianie kodu nic nam nie wyświetli, a co dopiero cokolwiek ma narysować. Chcąc rozpocząć rysowanie musimy zastosować metodę DOM getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. Metoda getContext może przyjąć tylko jeden parametr, który to jest trybem rysowania. Aktualnie jest dostępny tylko jeden tryb i jest to tryb 2d. W przyszłości będziemy mogli zobaczyć tryb 3d, lecz teraz pozostajemy przy trybie 2d. Korzystając z kolejnej metody DOM - getElementById, zdefiniujemy pierwszą linię skryptu pozwalającego nam na rozpoczęcie rysowania za pomocą elementu Canvas. Metoda ta pozwoli nam na uzyskanie dostępu do drugiej metody getContext, dzięki której mamy dostęp do trybu rysowania:

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

Starsze wersje przeglądarek?!

Firefox w wersji 1.0 i starsze jego wydania oraz np. Internet Explorer w wersji 6 nie potrafią rozpoznać elementu Canvas. Co teraz? :| Potrzebujemy metody chroniącej przeglądarki, które nie wspierają canvas, przed uruchomieniem naszego skryptu. Można tego łatwo dokonać wykonując test metody getContext. Kawałek górnego kodu wyglądał będzie tak:

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// kod rysowania

}
 

Do kodu należy dodać jeszcze wyrażenie if, aby przeglądarka nie potrafiąca wczytać Canvas, nie próbowała tego zrobić.

Łączenie kodu!

Połączę teraz wszystko, tworząc nam szablon podstawowego dokumentu do innych przykładów:

<html>
<head>
<title>Szablon elementu Canvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('pierwszy_przyklad');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 2px solid black; }
</style>
</head>
<body onload="draw();">

<canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

</body>
</html>

SZABLON - pobierz!

Wracając do kodu i spoglądając na skrypt zobaczymy, że została wywołana funkcja draw, która zostanie raz wywołana, kiedy zakończy się ładowanie strony (poprzez umieszczenie atrybuty onload w znaczniku body).

Ok, pierwsze koty za płoty :P. Utworzyliśmy szablon, który posłuż nam niedługo jako podkład pod bardziej zaawansowane przykłady. Niebawem kolejne części opisu Canvas, a między czasie odsyłam do korzystania z zasobów Mozilla Developer Center.

Treść wraz przykładami została opracowana na podstawie Przewodnika po canvas, będącego częścią MDC PL.

Podobne artykuły


16
komentarze: 5 | wyświetlenia: 9002
9
komentarze: 0 | wyświetlenia: 2781
49
komentarze: 18 | wyświetlenia: 64968
37
komentarze: 9 | wyświetlenia: 28508
17
komentarze: 4 | wyświetlenia: 14150
15
komentarze: 5 | wyświetlenia: 32753
13
komentarze: 2 | wyświetlenia: 22958
12
komentarze: 3 | wyświetlenia: 29775
12
komentarze: 2 | wyświetlenia: 18504
11
komentarze: 2 | wyświetlenia: 33144
11
komentarze: 1 | wyświetlenia: 86389
11
komentarze: 1 | wyświetlenia: 10463
10
komentarze: 1 | wyświetlenia: 34966
10
komentarze: 5 | wyświetlenia: 20410
 
Autor
Artykuł

Powiązane tematy





Zdaje mi się, że zamierzasz dopiero napisać drugą część i ją umieścić jako drugi artykuł. Nie rób tego. Ten artykuł, choć całkiem dobry, to zawiera zbyt mało informacji. Bardzo mało dowiedzieliśmy się o canvas. Na koniec doklej drugą część, może wtedy będą tworzyło jakąś całość.



Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska