Kas yra canvas elementas HTML5?

HTML5 <canvas> elementas yra konteineris grafikai piešti naudojant skriptus (dažniausiai JavaScript). Jis leidžia kurti dinamiškas vizualizacijas, žaidimus ir animacijas tiesiog naršyklėje be papildinių.

Pagrindiniai aspektai:

• Pixeliais piešimas: Veikia pikselių lygyje, suteikdamas visišką kontrolę kiekvienam vaizdo elementui.
• API naudojimas: Sąveika su <canvas> vyksta per renderavimo API, dažniausiai naudojamas 2d kontekstas dviejų matmenų grafikoms. Taip pat yra webgl 3D.
• Tuščias drobė: <canvas> elementas pats yra tik konteineris. Visi piešimai atliekami programiškai.

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

// Gauname `<canvas>` elementą
const canvas = document.getElementById('myCanvas');

// Gauname 2D piešimo kontekstą
const ctx = canvas.getContext('2d');

// Piešiame stačiakampį
ctx.fillStyle = "#FF0000"; // Užpildo spalva
ctx.fillRect(0, 0, 150, 75); // x, y, plotis, aukštis

Galimybės apima:

• Primityvios formos (linijos, stačiakampiai, apskritimai, lankai)
• Tekstas
• Vaizdai
• Gradientai ir raštai
• Keliai (path) sudėtingoms figūroms piešti.