Co to jest Canvas?Element Canvas jest elementem zdefiniowanym w kodzie HTML przy uzyciu atrybutw:-szeroko,-wysoko.Pozwala na rysowanie grafiki rastrowej na stronach internetowych. Canvas jest to prostoktny obszar, ktry po umieszczeniu na stronie umoliwia kontrolowanie kadego punku za pomoc JavaScript. Zapewnia on rysowanie grafiki,zaczynajc od prostych figur geometrycznych, poprzez ronego rodzaju krzywe, gradienty, wykresy, transformacje. Dodatkowo moemy cyklicznie przerysowywa cay obszar, wywietlajc animacje i gry.

Oto kilka powodw, dla ktrych warto rozway nauki obsugi funkcji HTML5 CANVAS:Interaktywno. Canvas jest w peni interaktywny. Moe reagowa na dziaania uytkownika przy nasuchiwanie zdarze klawiatury, myszy lub dotyku. Wic deweloper nie jest ograniczony tylko do statycznych grafik i obrazw.Animacja. Kady obiekt rysowany na ptnie moe by animowany. Pozwala to na tworzenie wielu rodzaju animacji, od prostych piek odbijajcych si do przodu do kinematyki odwrotnej.Elastyczno. Deweloperzy mog tworzy cokolwiek za pomoc ptna. Moe wywietla linie, ksztaty, tekst, obrazy, itp - z lub bez animacji. Przegldarka / Pomoc Platforma. HTML5 Canvas jest obsugiwana przez wszystkie najpopularniejsze przegldarki i s dostpne w szerokiej gamie urzdze(tablety,smartfony).Popularnoci. Jego popularno szybko i stale ronie, wic nie ma niedoboru dostpnych zasobw.Darmowe i dostpne narzdzia programistyczne. Podstawowe narzdzia do tworzenia aplikacji Canvas HTML5 to tylko przegldarka i edytor kodu. Dodatkowo, istnieje wiele darmowych bibliotek oraz narzdzi.

Jakie aplikacje mona tworzy z HTML5 Canvas?-Tworzenie gier. Zestaw funkcji HTML5 Canvas jest idealnym kandydatem do produkcji rnego rodzaju gier 2D i 3D.-Tworzenie reklam. HTML5 Canvas jest idealnym zamiennikiem dla banerw i reklam opartych na flashu. Posiada wszystkie niezbdne funkcje do przycignicia uwagi kupujcych.-Reprezentacja danych. HTML5 moe zbiera dane z globalnych rde danych i uywa ich do tworzenia atrakcyjnych wizualnie oraz interaktywnych wykresw i rysunkw z wykorzystaniem elementu Canvas.-Edukacja i trening. Canvas HTML5 moe by stosowany do produkcji skutecznych i atrakcyjnych dowiadcze edukacyjnych, czc tekst, obrazy, filmy i dwik. Tworzc animowane interaktywne strony dla dzieci.

Canvas Rendering ContextsKady element Canvas HTML5 musi mie kontekst. Kontekst okrela, co HTML5 Canvas API bdzie uywa.- 2d kontekst jest uywany do rysowania grafiki 2D i manipulowanie bitmapy.var context = canvas.getContext('2d');- 3d Kontekst jest wykorzystywany do tworzenia grafiki 3D i manipulacji. var context = canvas.getContext('3d');Ostatni nazywa si WebGL i zapewnia dostp dotrjwymiarowegoAPIw przegldarce internetowej.var context = canvas.getContext('webgl');

Obsuga przegldarek, ktre nie wspieraj elementu Canvas.HTML 5 jest nowym standardem i wiele starszych przegldarek nie jest w stanie wywietli elementu Canvas. Dlatego podczas tworzenia strony z elementem ptna warto doda informacje dla uytkownika o braku wsparcia elementu Canvas w jego przegldarce umieszczajc komunikat miedzy znacznikami . Ukae si on w przypadku, gdy przegldarka nie bdzie wspieraa elementu canvas

Wstp do rysowaniaDomylnie przegldarka tworzy element Canvas o szerokoci 300 pikseli i wysokoci 150 pikseli, nawet jeli nie s one okrelone w HTML. Mona zmieni rozmiar, okrelajc szeroko i wysoko.

Zauwamy te, e dalimy ptnie atrybut ID, ktre uyjemy w naszym JavaScript. Moemy uy CSS, aby doda obramowanie, dziki czemu bdziemy widzie granice naszego ptna.Zauwa, e pomidzy otwarcia i zamknicia tagw, dodaem treci, ktre bd wywietlane, jeli przegldarka nie obsuguje ptnie.

Twoja przegldarka nie wspiera Canvas! Zainstaluj Internet Explorer 9.x

JavaScript rozpoczyna si od dwch lini. W pierwszej linii tworzymy zmienn, ktra buforuje nasze elementu canvas poprzez jego ID. Druga linia tworzy zmienn (kontekstowa), ktra odwouje si do kontekstu 2D na ptnie przy uyciu funkcji getContext (). Bdziemy uywa zmiennej kontekstowej, aby uzyska dostp do wszystkich funkcji i waciwoci rysowania kanwy.var canvas = document.getElementById('Napis');var context = canvas.getContext('2d');Dziki temu moemy zacz eksperymentowa z API Canvas na naszym ptnie.HTML5 Canvas Element Size vs. Drawing Surface SizeSzeroko i wysoko potna Canvas mona ustawi rwnie przy uyciu CSS. Jednak rozmiar ptna z CSS nie jest taki sam jak rozmiar ptna ustawiony przy uyciu elementu CANVAS. To dlatego, e ptno ma dwa wymiary. Rozmiar samego elementu(ptna) oraz wielko powierzchni elementw rysuku(np.kwadrat,prostokt,prosta,krzywa itp.)Po ustawieniu szeroko i wysoko elementu atrybutw(ptno), mona ustawi zarwno rozmiar elementu i wielko powierzchni rysowania elementu.Jednak podczas korzystania z CSS. Ustalamy tylko wielko ptna Canvas a nie rozmiar powierzchni elementw rysunku. Gdy rozmiar elementu canvas nie odpowiada wielkoci jego powierzchni rysunku, przegldarka skaluje powierzchni rysunku, aby pasowa do elementu (co moe doprowadzi do zaskakujcych i niechcianych skutkw).Zrozumienie Ukadu wsprzdnychW przestrzeni 2D, pozycje odnosz si do wsprzdnych X i Y. O X przebiega poziomo, a o Y rozciga si pionowo. Centrum jest pozycja x = 0 i y = 0, ktry moe by rwnie wyraone jako (0, 0). Ten sposb pozycjonowania przedmiotw, stosowana w matematyce, jest znany jako kartezjaski ukadu wsprzdnych.Ptno ukadu wsprzdnych, jednak stawia centrum w lewym grnym rogu ptna, o wsprzdnych X, zwikszajc si w prawo i Y wzrasta w kierunku dolnej czci ptna. Tak wic w przeciwiestwie do standardowego kartezjaskiego ukadu wsprzdnych, miejsca na ptnie nie maja widocznych ujemnych punktw. Korzystanie z ujemnych wsprzdnych nie spowoduje awarii aplikacji, ale obiekty umieszczone za pomoc wsprzdnych punktw ujemnych nie pojawi si na stronie.