Loading ...W rozdziale:
- Wprowadzenie
- Element canvas
- Element video
- Magazyn lokalny
- Robotnicy sieciowi
- Aplikacje offline
- Geolokalizacja
- Formularze HTML5
- Mikrodane
- API historii
Kanwa rysunku
W specyfikacji element canvas HTML5 ma następującą definicję: „zależna od rozdzielczości mapa bitowa stanowiąca kanwę rysunku, której można używać do renderowania na bieżąco wykresów, obrazów w grach i innych rodzajów grafiki.” Kanwa to prostokątny obszar na stronie, w którym można rysować dowolne obrazy za pomocą JavaScriptu. W specyfikacji języka HTML5 zdefiniowany jest też zestaw funkcji (API canvas) do rysowania figur geometrycznych, definiowania ścieżek, tworzenia gradientów i stosowania przekształceń.
Obsługa API canvas jest sprawdzana za pomocą metody nr 2. Jeśli przeglądarka obsługuje API canvas, to utworzony obiekt DOM reprezentujący element canvas ma metodę getContext(). Jeśli przeglądarka nie obsługuje API canvas, to utworzony obiekt DOM dla elementu <canvas> ma tylko standardowe własności i nie ma żadnej z charakterystycznych tylko dla tego elementu.
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Funkcja ta zaczyna działanie od utworzenia atrapy elementu canvas. Jako że nie jest on wstawiany na stronę, nigdy nie zostanie wyświetlony. Unosi się tylko leniwie w pamięci, jak łódka na spokojnej rzece.
return !!document.createElement('canvas').getContext;Po utworzeniu elementu canvas sprawdzamy czy ma metodę getContext(). Metoda ta jest dostępna tylko, jeśli przeglądarka obsługuje API canvas.
return !!document.createElement('canvas').getContext;Na koniec stosujemy sztuczkę z podwójną negacją, aby wymusić wynik w postaci wartości logicznej (true lub false).
return !!document.createElement('canvas').getContext;Za pomocą tej funkcji można sprawdzić obsługę większości składników API canvas,wliczajc figury geometryczne, ścieżki, gradienty oraz wzory. Nie wykryje zewnętrznej biblioteki explorercanvas implementującej API canvas w przeglądarce Microsoft Internet Explorer.
Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi API canvas można użyć biblioteki Modernizr.
Sprawdzanie obsługi elementu canvas
if (Modernizr.canvas) {
// narysujmy parę figur!
} else {
// brak standardowej obsługi :(
}Istnieje osobny test do sprawdzania obsługi tekstowego API canvas. Jego opis znajduje się poniżej.
Tekstowe API canvas
Nawet jeśli przeglądarka obsługuje API canvas, może nie obsługiwać API tekstowego canvas. API canvas z czasem rosło i funkcje tekstowe zostały dodane w późniejszym czasie jego istnienia. Niektóre przeglądarki obsługiwały element kanwy zanim jeszcze API tekstowe zostało ukończone.
Obsługę API tekstowego canvas sprawdza się za pomocą metody nr 2. Jeśli przeglądarka obsługuje API, to utworzony obiekt DOM reprezentujący element canvas ma metodę getContext(). Jeśli przeglądarka nie obsługuje API canvas, to utworzony obiekt DOM dla elementu canvas ma tylko standardowe własności i nie ma żadnej z charakterystycznych tylko dla tego elementu.
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}Funkcja ta zaczyna działanie od sprawdzenia obsługi elementu canvas, używając do tego celu opisanej wcześniej funkcji supports_canvas(). Jeśli przeglądarka nie obsługuje API canvas, to z pewnością nie obsługuje też jego API tekstowego!
if (!supports_canvas()) { return false; }Następnie tworzymy atrapę elementu canvas i pobieramy jego kontekst rysowania. Mamy pewność, że to zadziała, ponieważ funkcja supports_canvas() już sprawdziła, czy obiekty canvas mają metodę getContext().
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');Na koniec sprawdzamy czy kontekst rysunkowy ma funkcję fillText(). Jeśli tak, to API tekstowe canvas jest dostępne. Hurrrra!
return typeof context.fillText == 'function';Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi API tekstowego canvas można użyć biblioteki Modernizr.
Sprawdzanie obsługi API tekstowego canvas
if (Modernizr.canvastext) {
// narysujmy trochę tekstu!
} else {
// brak standardowej obsługi tekstu :(
}
Wysyłam...
Dodaj komentarz