Mis on canvas element HTML5-s?

HTML5 <canvas> element on konteiner, mis võimaldab joonistada graafikat skriptide (tavaliselt JavaScripti) abil. See võimaldab luua dünaamilisi visualiseeringuid, mänge ja animatsioone otse brauseris ilma pluginateta.

Peamised aspektid:

• Pikslitega joonistamine: Töötleb piksli tasandil, pakkudes täielikku kontrolli iga pildi elemendi üle.
• API kasutamine: Koostoime <canvas>-iga toimub renderdamise API kaudu, kõige levinum on 2d kontekst kahe mõõtmelise graafika jaoks. Samuti on olemas webgl 3D jaoks.
• Tühi lõuend: <canvas> element ise on lihtsalt konteiner. Kõik joonistused tehakse programmatiski.

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

// Saame `<canvas>` elemendi
const canvas = document.getElementById('myCanvas');

// Saame 2D joonistamise konteksti
const ctx = canvas.getContext('2d');

// Joonistame ristküliku
ctx.fillStyle = "#FF0000"; // Täitevärv
ctx.fillRect(0, 0, 150, 75); // x, y, laius, kõrgus

Võimalused hõlmavad:

• Põhivormid (jooned, ristkülikud, ringid, kaared)
• Tekst
• Pildid
• Gradientid ja mustrid
• Teed (path) keerukamate kujundite jaoks