Kurs HTML5 – Canvas – Wprowadzenie  

Opublikowano: 2011-11-14

Element canvas umożliwia rysowanie grafiki rastrowej na stronach internetowych. Canvas jest prostokątnym obszarem, który po umieszczeniu na stronie HTML5 umożliwia kontrolowanie każdego punktu za pomocą JavaScript. Pozwala on na rysowanie grafiki, zaczynając od prostych figur geometrycznych, poprzez różnego rodzaju krzywe, gradienty, wykresy, transformacje. Dodatkowo możemy cyklicznie przerysowywać cały obszar, wyświetlając animacje i gry.

Aby wyjaśnić sposób użycia i zasadę działania elementu canvas, został przygotowany zestaw samouczków, które, krok po kroku, przedstawiają kolejne jego możliwości.

Spis samouczków:

• Canvas podstawy – w tej części kursu dowiesz się, jak rozpocząć pracę z canvas, jak wspierać przeglądarki, które nie radzą sobie z tym elementem, a także przygotujesz swoją pierwszą grafikę.
• Kształty w Canvas – w tej części kursu dowiesz się, jak tworzyć figury wykorzystując ścieżki, a także poznasz sposoby rysowania łuków i krzywych.
• Linie w Canvas - w tej części kursu dowiesz się więcej na temat możliwości zakończenia rysowanych linii, a także różnych sposobów ich łączenia.
• Grafika w Canvas – w tej części kursu dowiesz się, w jaki sposób importować i rysować obrazki, a następnie skalować je i kroić.
• Przezroczystość i cień w Canvas – w tej części kursu dowiesz się, w jaki sposób ustawiać przeźroczystość oraz cień elementu.
• Transformacje w Canvas – w tej części kursu dowiesz się, jak dokonywać przekształceń na elementach wykorzystywanych podczas tworzenia grafiki na elemencie canvas.
• Kompozycje w Canvas – w tej części kursu dowiesz się, w jaki sposób, rysując nowe obrazy, zmieniać ich ustawienie względem siebie.
• Tekst w Canvas - w tej części kursu poznasz sposoby pisania po elemencie canvas.
• Animacje w Canvas - w tej części kursu dowiesz się, jak tworzyć proste animacje w canvas.

 

---