Kas ir canvas elements HTML5?

HTML5 <canvas> elements ir konteiners grafiku zīmēšanai ar skriptiem (parasti JavaScript). Tas ļauj tieši pārlūkprogrammā bez spraudņiem veidot dinamiskas vizualizācijas, spēles un animācijas.

Galvenie aspekti:

• Pikseļu zīmēšana: Darbojas pikseļu līmenī, nodrošinot pilnīgu kontroli pār katru attēla elementu.
• API izmantošana: Ar <canvas> saziņa notiek caur renderēšanas API, visbiežāk 2d konteksts 2D grafikai. Ir arī webgl 3D.
• Tukšs audekls: Pašs <canvas> elements ir tikai konteiners. Visas zīmēšanas operācijas tiek veiktas programmatiski.

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

// Saņemam `<canvas>` elementu
const canvas = document.getElementById('myCanvas');

// Saņemam 2D zīmēšanas kontekstu
const ctx = canvas.getContext('2d');

// Zīmējam taisnstūri
ctx.fillStyle = "#FF0000"; // Aizpildes krāsa
ctx.fillRect(0, 0, 150, 75); // x, y, platums, augstums

Iespējas ietver:

• Primitīvas formas (līnijas, taisnstūri, apļi, loka)
• Teksts
• Attēli
• Gradientus un rakstus
• Ceļus (path) sarežģītākām figūrām