Co je to prvek canvas v HTML5?

Prvek <canvas> v HTML5 je kontejner pro kreslení grafiky pomocí skriptů (obvykle JavaScript). Umožňuje vytvářet dynamické vizualizace, hry a animace přímo v prohlížeči bez pluginů.

Klíčové aspekty:

• Kreslení pixel po pixelu: Funguje na úrovni pixelů, poskytuje úplnou kontrolu nad každým prvkem obrázku.
• Použití API: Interakce s <canvas> probíhá přes API renderovacího kontextu, nejběžnější je 2d pro dvourozměrnou grafiku. Existuje také webgl pro 3D.
• Prázdné plátno: Samotný prvek <canvas> je pouze kontejner. Veškeré kreslení se provádí programově.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// Získání prvku canvas
const canvas = document.getElementById('myCanvas');

// Získání 2D kontextu kreslení
const ctx = canvas.getContext('2d');

// Nakreslení obdélníku
ctx.fillStyle = "#FF0000"; // Barva výplně
ctx.fillRect(0, 0, 150, 75); // x, y, šířka, výška

Možnosti zahrnují:

• Primitivní tvary (čáry, obdélníky, kruhy, oblouky)
• Text
• Obrázky
• Přechody a vzory
• Cesty (path) pro složitější tvary