Przykład
Narysuj czerwony kwadrat, na bieżąco, i pokazać go wewnątrz <canvas> elementu:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Spróbuj sam " Definicja i Wykorzystanie
<canvas> tag służy do rysowania grafiki, na bieżąco, za pomocą skryptów (zazwyczaj JavaScript).
<canvas> znacznik jest tylko kontenerem dla grafiki, należy użyć skryptu rzeczywiście wyciągnąć grafiki.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje elementu.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4,0 | 9,0 | 2,0 | 3,1 | 9,0 |
Różnice między HTML 4.01 i HTML5
<canvas> tag nowego w HTML5.
Porady i wskazówki
Uwaga: Każdy tekst wewnątrz <canvas> elementu będzie wyświetlany w przeglądarkach, które nie obsługują <canvas> .
Wskazówka: Więcej informacji na temat <canvas> elementu w naszym HTML Canvas Tutorial .
Wskazówka: Aby uzyskać pełną odniesień do wszystkich właściwości i metod, które mogą być używane z obiektu płótnie, przejdź do naszej HTML Canvas Reference .
Atrybuty
= Nowe w HTML5.
| Atrybut | Wartość | Opis |
|---|---|---|
| height | pixels | Określa wysokość płótna |
| width | pixels | Określa szerokość płótna |
Atrybuty globalne
<canvas> tag obsługuje również globalne Atrybuty w HTML .
Atrybuty Event
<canvas> tag obsługuje również Event Atrybuty w HTML .
Domyślne ustawienia CSS
Żaden.