--- title: Rysowanie grafiki z elementem canvas slug: Web/API/Canvas_API/Tutorial tags: - Grafika - HTML - HTML5 - Internet - Kanwa - Poradnik - instrukcja translation_of: Web/API/Canvas_API/Tutorial ---
<canvas>
jest elementem HTML, który może być użyty do rysowania grafik używając skryptów (często JavaScript'u). To może zostać użyte do na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i i nie prostych) animacji. Obrazy na tej strone pokazują przykłady implementacji <canvas>
, które będą stworzone w tym poradniku.
Ten poradnik opisuje jak używać elementu <canvas>
do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.
Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <canvas>
od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.
Używanie elementu <canvas>
nie jest trudne, ale potrzebujesz podstawowego zrozumienia HTML i JavaScript. Element <canvas>
nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML height
i width
. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.
Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.