Samouczek HTML Canvas

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

Powyższa grafika jest tworzona za pomocą <canvas>.

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

Co to jest kanwa HTML?

Element HTML <canvas> służy do rysowania grafiki w locie za pomocą skryptów (zwykle JavaScript).

Element <canvas> jest tylko pojemnikiem na grafikę. Musisz użyć skryptu, aby faktycznie narysować grafikę.

Canvas ma kilka metod rysowania ścieżek, ramek, okręgów, tekstu i dodawania obrazów.

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje element <canvas>.

HTML Canvas może rysować tekst

Canvas może narysować kolorowy tekst z animacją lub bez.

HTML Canvas może rysować grafikę

Canvas ma świetne funkcje graficznej prezentacji danych z obrazami wykresów i wykresów.

HTML Canvas można animować

Przedmioty na płótnie mogą się poruszać. Wszystko jest możliwe: od prostych odbijających się piłek po złożone animacje.

HTML Canvas może być interaktywne

Canvas może odpowiadać na zdarzenia JavaScript.

Canvas może reagować na każdą akcję użytkownika (kliknięcia klawiszy, kliknięcia myszą, kliknięcia przycisków, ruchy palców).

HTML Canvas może być używane w grach

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

Przykład płótna

W HTML element <canvas> wygląda tak:

Element <canvas> musi mieć atrybut id, aby mógł się do niego odwoływać JavaScript.

Atrybut szerokość i wysokość jest niezbędny do określenia rozmiaru płótna.

Wskazówka: na jednej stronie HTML może znajdować się wiele elementów <canvas>.

Aby dodać obramowanie, użyj atrybutu stylu:

Kolejne rozdziały pokazują, jak rysować na płótnie.