Przewodnik po canvas:Proste zastosowanie
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Spis treści |
[edytuj] Element <canvas>
Zacznijmy ten przewodnik od przyjrzenia się elementowi <canvas> samemu w sobie.
<canvas id="tutorial" width="150" height="150"></canvas>
Wygląda on jak element <img>, jedyną różnicą jest brak atrybutów src i alt. Element <canvas> posiada tylko dwa atrybuty – width i height. 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.
Atrybut id nie jest charakterystyczny dla elementu canvas, ale jest jednym z jego domyślnych atrybutów, który można stosować do (prawie) każdego elementu HTML (jak na przykład element class). Dobrym pomysłem jest zawsze wstawiać element id, ponieważ łatwiej jest wtedy zidentyfikować element canvas w naszym skrypcie.
Element <canvas> możemy określić takimi samymi stylami jak normalne obrazy (margines, obramowanie, tło, itd.). Jednakże te zasady nie stosują się konkretnie do rysowania na "płótnie". W dalszej części tego przewodnika zobaczymy jak to jest zrobione.
Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.
[edytuj] Treść alternatywna
Ponieważ element <canvas> został dopiero wprowadzony i nie jest on zaimplementowany w wielu przeglądarkach, wliczając przeglądarkę Firefox 1.0 i Internet Explorer, musimy zapewnić alternatywną treść (z ang. fallback content), kiedy przeglądarka nie wspiera tego elementu.
Szczęśliwie sposób jest bardzo prosty: dodajemy alternatywną treść w środku elementu canvas. Przeglądarki niewspierające elementu <canvas> w ogóle ominą go całkowicie i wyświetlą treść alternatywną, natomiast inne wyświetlą element <canvas> normalnie.
Na przykład możemy zapewnić opis zawartości canvas albo zapewnić statyczny obrazek dla dynamicznie wyświetlanej zawartości. To może byś coś w tym rodzaju:
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150"/> </canvas>
Uwaga: Aktualna implementacja firmy Apple, różni się od specyfikacji w tym, iż nie rozpoznaje znacznika zamykającego </canvas>. To znaczy, że w przeglądarce Safari zostanie wyświetlona cała alternatywna treść. Można to rozwiązać przez zastosowanie stylów CSS lub skryptów do ukrycia tych treści.
[edytuj] getContext
Gdy stworzysz stronę HTML i otworzysz ją w Firefoksie nie zobaczysz nic w polu zajmowanym przez element <canvas>. Musimy zaznaczyć, że chcemy rozpocząć rysowanie i tutaj z pomocą przychodzi getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. 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, ale na razie będziemy tkwić w trybie 2d.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
W pierwszej linii uzyskujemy wskazanie DOM przy pomocy metody getElementById. Możemy wtedy uzyskać dostęp do trybu rysowania, stosując metodę getContext.
[edytuj] Wykluczenie dla przeglądarek nieobsługujących rysowania
Podobnie do alternatywnej treści 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 naszego górnego kodu stał się teraz taki:
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// kod rysowania
}
Cały kod rysowania powinien znaleźć się w środku wyrażenia if, gdyż wtedy przeglądarka nieobsługująca elementu <canvas> nie spróbuje go uruchomić.
[edytuj] Łączenie w jedną całość
Jeżeli połączymy wszystko razem, prosty szablon strony HTML stanie się czymś takim. Będziemy używali tego układu dla wszystkich przykładów, które zobaczymy w dalszej części przewodnika.
[edytuj] Szablon
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Jeśli spojrzymy na skrypt zobaczysz, ż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). Ta funkcja mogłaby być wywołana również za pomocą setTimeout, setInterval, czy każdej innej funkcji tak długo jak strona będzie ładowała się pierwsza.
To są podstawy. Na następnych stronach przewodnika będziemy mogli w końcu faktycznie coś narysować.