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.

Linki zewnętrzne

• Przykładowa implementacja animacji z wykorzystaniem elementów HTML5 Canvas (pol.)
• Elementy HTML5 Canvas (ang.)
• HTML5 canvas na w3schools (ang.)