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
Do rzeczy
W języku HTML5 dostępny jest element canvas o następującej definicji: „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.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
|---|---|---|---|---|---|---|
| 7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer 7 i 8 wymagają dodatku zewnętrznej biblioteki explorercanvas. Internet Explorer 9 standardowo obsługuje element <canvas>.
| ||||||
Jak wygląda kanwa? Tak naprawdę to w ogóle nie wygląda. Element canvas nie ma treści ani obramowania.
Niewidoczna kanwa
Kod źródłowy tego elementu jest następujący:
<canvas width="300" height="225"></canvas>Dodamy przerywane obramowanie, aby było widać o czym jest mowa.
Kanwa z obramowaniem
Na jednej stronie może znajdować się wiele elementów canvas. Każdy z nich jest uwzględniony w drzewie DOM i ma swój własny stan. Jeśli każdej kanwie przypisze się identyfikator, to można się do nich odwoływać w taki sam sposób, jak do innych elementów.
Dodamy do przedstawionego przykładu atrybut id:
<canvas id="a" width="300" height="225"></canvas>Teraz bez trudu można znaleźć ten element w drzewie DOM.
var a_canvas = document.getElementById("a");
Wysyłam...
Dodaj komentarz