HTML <canvas> Element służy do rysowania grafiki na stronie internetowej.
Grafika na lewo jest tworzony z <canvas> . To pokazuje cztery elementy: czerwony prostokąt, prostokąt gradient, prostokąt wielokolorowy, a tekst wielokolorowe.
Co to jest HTML Canvas?
HTML <canvas> Element służy do rysowania grafiki, na bieżąco, za pomocą skryptów (usually JavaScript) .
<canvas> elementu jest tylko pojemnikiem na grafikę. Musisz użyć skryptu faktycznie rysowania grafiki.
Płótno ma kilka sposobów rysowania ścieżki, pola, okręgów, tekstu i dodawania obrazów.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje <canvas> elementu.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4,0 | 9,0 | 2,0 | 3,1 | 9,0 |
HTML Canvas może wyciągnąć tekst
Płótno może rysować kolorowe tekst, z lub bez animacji.
HTML Canvas Can Draw Graphics
Płótno ma wielkie możliwości do graficznej prezentacji danych z obrazów grafów i wykresów.
HTML Canvas mogą być animowane
obiekty Canvas mogą poruszać. Wszystko jest możliwe: od prostych do złożonych kulki podskakują animacji.
HTML Canvas Może być Interactive
Płótno może reagować na zdarzenia JavaScript.
Płótno może reagować na wszelkie działania użytkownika (najważniejsze kliknięcia, kliknięcia myszy, kliknięć przycisków, ruch palca).
HTML Canvas Może być używany w grach
Metody Canvas "dla animacji, oferuje wiele możliwości dla aplikacji gier HTML.
Płótno Przykład
W HTML, A <canvas> elementu wygląda następująco:
<canvas id="myCanvas" width="200" height="100"></canvas><canvas> element musi mieć atrybut id więc może być określany przez JavaScript.
Atrybut szerokość i wysokość jest konieczne, aby określić rozmiar płótna.
Tip: Można mieć wiele <canvas> elementów na jednej stronie HTML.
Domyślnie <canvas> elementu nie ma granic i nie ma treści.
Aby dodać obramowanie, należy użyć atrybutu stylu:
Przykład
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Spróbuj sam " Kolejne rozdziały pokazują, jak rysować na płótnie.