Znak <canvas> HTML

Definicja i użycie

<canvas> Etykieta jest zazwyczaj rysowana w czasie rzeczywistym za pomocą skryptu (zwykle JavaScript).

<canvas> Etykieta jest przezroczysta, jest tylko kontenerem graficznym, aby rzeczywiście narysować grafikę, musi się używać skryptu.

w przeglądarkach, które mają wyłączone JavaScript i nie obsługuje <canvas> w przeglądarce, będzie wyświetlał <canvas> Każdy tekst wewnątrz elementu.

Wskazówki

Naucz się więcej o HTML Canvas w naszej <canvas> Więcej informacji o elemencie.

Aby zobaczyć pełną listę atrybutów i metod, odwiedź naszą Podręcznik referencyjny Canvas HTML.

Przykład

Przykład 1

Rysuj w czasie rzeczywistym czerwony prostokąt i wyświetl go w elemencie <canvas>:

<canvas id="myCanvas">
Twoja przeglądarka nie obsługuje etykiety canvas.
</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

Przykład 2

Inny przykład <canvas>:

<canvas id="myCanvas">
Twoja przeglądarka nie obsługuje etykiety canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Otwiera przezroczystość
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
height Wartość pikselowa Określa wysokość płótna. Domyślna wartość to 150.
width Wartość pikselowa Określa szerokość płótna. Domyślna wartość to 300.

Globalne atrybuty

<canvas> Tag obsługuje również Globalne atrybuty w HTML.

Atrybuty wydarzeń

<canvas> Tag obsługuje również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek będzie wyświetlać następujące wartości domyślne <canvas> Element:

canvas {
  height: 150px;
  width: 300px;
}

Spróbuj sam

Historia <canvas>

Ten element HTML został zaprojektowany do obsługi wektorowych grafik klienta. Nie ma on samodzielnych zachowań, ale dostarcza klientowi JavaScript API rysowania, aby skrypty mogły rysować wszystko, co chcą na płótnie.

Znacznik <canvas> został wprowadzony przez Apple w przeglądarce internetowej Safari 1.3. Przyczyną tego podstawowego rozszerzenia HTML było to, że możliwości rysunkowe HTML w Safari są również używane przez komponent Dashboard w systemie Mac OS X, a Apple chciał mieć sposób na wsparcie skryptowanych grafik w Dashboard.

Firefox 1.5 i Opera 9 podążały za przewodnictwem Safari. Oba te przeglądarki obsługują znacznik <canvas>.

Nawet w przeglądarce IE możemy używać znacznika <canvas> i na podstawie obsługi VML w IE możemy budować kompatybilne z <canvas> za pomocą otwartego kodu JavaScript (zainicjowanego przez Google). Zobacz również:http://excanvas.sourceforge.net/.

Starania dotyczące standaryzacji <canvas> są prowadzone przez nieoficjalne stowarzyszenie producentów przeglądarek internetowych, a obecnie <canvas> jest już oficjalnym znacznikiem w projekcie HTML 5. Zobacz również:http://www.whatwg.org/specs/web-apps/current-work/

Różnice między znacznikiem <canvas> a SVG oraz VML

Jednym z ważnych różnic między znacznikiem <canvas> a SVG oraz VML jest to, że <canvas> ma API rysunkowe oparte na JavaScript, podczas gdy SVG i VML używają dokumentu XML do opisu rysunku.

Te dwa podejścia są funkcjonalnie równoważne, każde z nich można symulować za pomocą drugiego. Na pierwszy rzut oka są bardzo różne, ale każde z nich ma swoje mocne i słabe strony. Na przykład, rysunek SVG jest łatwy do edycji, wystarczy usunąć elementy z jego opisu.

Aby usunąć element z jednego znacznika <canvas> tego samego grafu, często należy wyczyścić rysunek i ponownie go narysować.

Jak używać znacznika <canvas> do rysowania

Większość API rysunkowego Canvas nie jest zdefiniowana na elemencie <canvas>, ale na elemencie, który przechodzi przez. metoda getContext()na uzyskanym obiekcie 'środowiska rysunkowego'.

API Canvas również używa notacji ścieżki. Jednak ścieżka jest definiowana przez serię wywołań metod, a nie jako ciąg liter i cyfr, np. wywołania metod beginPath() i arc().

Po zdefiniowaniu ścieżki, inne metody, takie jak fill(), operują na tej ścieżce. Różne właściwości środowiska rysunkowego, takie jak fillStyle, wyjaśniają, jak te operacje są używane.

Uwaga:Jednym z powodów, dla których Canvas API jest bardzo kompaktowy, jest to, że nie oferuje żadnej obsługi rysowania tekstu. Aby dodać tekst do grafiki <canvas>, musisz albo samodzielnie go narysować i połączyć z obrazem bitmapowym, albo użyć CSS pozycjonowania nad <canvas>, aby pokryć tekst HTML.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0