Loading...W rozdziale:
- Wprowadzenie
- Rysowanie prostych kształtów
- Współrzędne na kanwie
- Ścieżki na kanwie
- Rysowanie gradientów
- Rysowanie tekstu na kanwie
- Wyświetlanie obrazów na kanwie
- Kanwa w Internet Explorerze
- Przykładowa gra
Kanwa a przeglądarka Internet Explorer
Internet Explorer do wersji 8.0 włącznie nie obsługuje API kanwy. (Natomiast IE 9 obsługuje je już w pełni.) Starsze wersje Internet Explorera obsługują natomiast technologię Microsoftu o nazwie VML, za pomocą której można zrobić wiele tych samych rzeczy, co przy użyciu elementu <canvas>. Dlatego powstał skrypt excanvas.js.
Skrypt Explorercanvas (excanvas.js) to otwarta dostępna na licencji Apache biblioteka JavaScript implementująca API kanwy w Internet Explorerze. Aby z niej skorzystać, należy na początku strony umieścić poniższy element <script>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
Części <!--[if lt IE 9]> i <![endif]--> to komentarze warunkowe. Internet Explorer interpretuje je jak instrukcję if: „jeśli bieżąca przeglądarka jest Internet Explorerem w wersji starszej od 9, to wykonaj ten blok kodu”. Dla wszystkich innych przeglądarek cały ten blok jest komentarzem HTML. W efekcie Internet Explorer 7 i 8 pobiorą skrypt excanvas.js i wykonają go, a inne przeglądarki zignorują ten kod (nie pobiorą skryptu i go nie wykonają). Dzięki temu w przeglądarkach obsługujących API kanwy strona będzie się szybciej wczytywała.
Dołączeniu skryptu excanvas.js w elemencie <head> strony to wszystko, co trzeba zrobić, aby namówić Internet Explorera do współpracy. Potem wystarczy dodać elementy <canvas> normalnie w kodzie HTML albo utworzyć je dynamicznie za pomocą JavaScriptu. Aby rysować figury geometryczne tekst i wzory na elemencie <canvas>, postępuj zgodnie ze wskazówkami opisanymi w tym rozdziale.
No… może niezupełnie. Jest kilka trudności:
- Gradienty mogą być tylko liniowe. Gradienty promieniste nie są obsługiwane.
- Wzory muszą być zwielokrotniane w obu kierunkach.
- Wycinki nie są obsługiwane.
- Niejednolite skalowanie powoduje niepoprawne skalowanie linii.
- Jest powolne. Chociaż to nikogo nie powinno dziwić, bo wszyscy wiedzą, że parser JavaScriptu w Internet Explorerze działa wolniej niż w innych przeglądarkach. Gdy zaczniesz rysować skomplikowane kształty przy użyciu biblioteki JavaScript zamieniającej instrukcje na polecenia całkiem innej technologii, coś w końcu musi się popsuć. Obniżki wydajności nie zauważysz w prostych rysunkach, jak kilka kresek i przekształcenie obrazu, ale od razu je dostrzeżesz, gdy zaczniesz tworzyć animacje i robić inne szalone rzeczy.
Z bibliotekę excanvas.js wiąże się jeszcze jeden problem, na który natknąłem się tworząc przykłady do tego rozdziału. ExplorerCanvas inicjuje własną atrapę interfejsu kanwy na każdej stronie HTML, do której dołączony jest skrypt excanvas.js. Ale to nie znaczy, że Internet Explorer może z niego od razu korzystać. W niektórych przypadkach może się zdarzyć, że ta atrapa interfejsu kanwy będzie prawie, ale jednak nie całkiem, gotowa do użytku. Najłatwiej rozpoznać to po tym, że Internet Explorer zgłasza błąd „Obiekt nie obsługuje tej właściwości lub metody”, gry próbujemy cokolwiek zrobić z elementem <canvas>, np. utworzyć uchwyt do jego kontekstu rysunkowego.
Najłatwiej problem ten jest rozwiązać czekając z operowaniem na kanwie do zdarzenia onload. To może trochę potrwać — jego wystąpienie opóźniają np. znajdujące się na stronie obrazy i filmy wideo — ale w ten sposób damy narzędziu ExplorerCanvas czas na wykonanie swojej pracy.
Wysyłam...
Dodaj komentarz