Tutorial HTML Canvas

Element <canvas> w HTML służy do rysowania grafiki na stronie internetowej.

Powyższe grafiki zostały utworzone za pomocą <canvas>.

Pokazuje cztery elementy: czerwony prostokąt, stopniowy prostokąt, wielokolorowy prostokąt i wielokolorowy tekst.

Co to jest Canvas HTML?

Element <canvas> HTML jest używany do dynamicznego rysowania grafiki za pomocą skryptów (zwykle JavaScript).

Element <canvas> jest tylko kontenerem grafiki. Musisz użyć skryptu do rysowania rzeczywistej grafiki.

Canvas ma wiele metod do rysowania ścieżek, prostokątów, okręgów, tekstu i dodawania obrazów.

Canvas HTML może rysować tekst

Canvas może rysować kolorowy tekst, a także z efektami animacji.

Canvas HTML może rysować grafiki

Canvas ma potężne możliwości prezentacji danych wizualnych za pomocą grafik i wykresów.

Canvas HTML może być animowany

Obiekt Canvas może się poruszać. Wszystko jest możliwe: od prostych piłek do złożonych animacji.

Canvas HTML jest interaktywny

Canvas może reagować na wydarzenia JavaScript.

Canvas może reagować na każdą operację użytkownika (kliknięcie klawisza, kliknięcie myszy, kliknięcie przycisku, ruch palca).

Canvas HTML można używać do gier

Metody animacji Canvas oferują wiele możliwości dla aplikacji gier HTML.

Przykład Canvas

W HTML, element <canvas> wygląda tak:

<canvas id="myCanvas" width="200" height="100"></canvas>

Element <canvas> musi mieć atrybut id, aby JavaScript mógł go odwołać.

Atrybuty width i height są również niezbędne do określenia rozmiaru płótna.

Wskazówka: Na jednej stronie HTML można mieć wiele elementów <canvas>.

Domyślnie, element <canvas> nie ma ramki ani zawartości.

Aby dodać ramkę, użyj atrybutu style:

Przykład

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Spróbuj sam

Następne rozdziały omówią, jak rysować na płótnie.

Zobacz również：

Pełna dokumentacja Canvas na CodeW3C.com

Obsługa przeglądarek

<canvas> jest elementem standardu HTML5 (2014).

Wszystkie współczesne przeglądarki obsługują <canvas>：