HTML5 Canvas

HTML5 Canvas — element języka HTML wprowadzony w HTML 5 pozwalający na dynamiczne, skryptowe renderowanie kształtów i obrazów bitmapowych. Dzięki wprowadzeniu obiektu canvas możliwe stało się tworzenie dynamicznych dwu- i trójwymiarowych animacji czy gier działających w przeglądarkach bez dodatkowych wtyczek.

Przykład

Przykładowy fragment kodu HTML5 wykorzystujący tag <canvas>. Jeżeli tag ten nie jest obsługiwany, wyświetli się wpisany tekst.

<canvas id="example" width="200" height="200">
Twoja przeglądarka nie obsługuje elementu Canvas.
</canvas>

Korzystając z języka JavaScript, można rysować na elemencie Canvas

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

Powyższy kod rysuje na ekranie czerwony prostokąt.

Kompatybilność z przeglądarkami

Element canvas jest obecnie obsługiwany przez takie przeglądarki jak: Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror i Opera.

Canvas fingerprinting

Element Canvas jest wykorzystywany do ustalenia tożsamości konkretnej przeglądarki za pomocą "odcisku palca", czyli informacji wysyłanej do serwera o parametrach rysowanego przez przeglądarkę kształtu. Metodę zaprezentowano w 2012. Zastosowanie jej w komercyjnym przedsięwzięciu śledzenia użytkowników zaniepokoiło opinię publiczną.

Linki zewnętrzne

• HTML/Elements/canvas na w3.org/wiki (ang.)
• Canvas na Mozilla Developer Network (ang.)
• Elementy HTML5 Canvas (ang.)
• HTML5 canvas na w3schools (ang.)

{{Przypisy}} Nieprawidłowe pola: przypisy.