HTML5-də canvas elementi nədir?

HTML5-də <canvas> elementi, skriptlər (adətən JavaScript) vasitəsilə qrafiklər çəkmək üçün konteynerdir. Bu, brauzerdə plaginlər olmadan dinamik vizuallaşdırmalar, oyunlar və animasiyalar yaratmağa imkan verir.

Əsas aspektlər:

• Piksel ilə çəkiliş: Piksel səviyyəsində işləyir və hər bir şəkil elementinə tam nəzarət təmin edir.
• API istifadə: <canvas> ilə qarşılıqlı əlaqə ən çox 2d kontekst ilə həyata keçirilir, bu ikiölçülü qrafika üçün ən yaygın API-dir. Həmçinin webgl 3D üçün mövcuddur.
• Boş lövhə: <canvas> elementi sadəcə konteynerdir. Bütün çəkiliş proqramlaşdırma ilə həyata keçirilir.

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

// Canvas elementini əldə edirik
const canvas = document.getElementById('myCanvas');

// 2D çəkiliş kontekstini əldə edirik
const ctx = canvas.getContext('2d');

// Düzbucaqlı çəkirik
ctx.fillStyle = "#FF0000"; // Doldurma rəngi
ctx.fillRect(0, 0, 150, 75); // x, y, en, hündürlük

İmkanlar aşağıdakılardır:

• Əsas formalı şəkillər (xətlər, düzbucaqlı, dairələr, yaylar)
• Mətn
• Şəkillər
• Gradientlər və naxışlar
• Çox mürəkkəb fiqurlar üçün yollar (path)