Canvas

Element <canvas> določa risalno površino, na katero lahko z uporabo jezika JavaScript rišemo grafične oblike, besedilo, slike in animacije. Uporabljamo ga pri primerih, kjer želimo grafično vsebino ustvarjati ali spreminjati programsko.

Sam element <canvas> še ne prikaže narisane vsebine. V dokumentu najprej določimo platno, nato pa v skripti pridobimo risalni kontekst in z ustreznimi metodami izvedemo risanje.

Osnovna oznaka <canvas>

Elementu <canvas> navadno določimo identifikator ter širino in višino risalne površine. Tako ga lahko v JavaScriptu enostavno poiščemo in uporabimo.

<canvas id="platno" width="200" height="150">
   Vaš brskalnik ne podpira elementa canvas.
</canvas>

Besedilo med začetno in končno oznako se prikaže le v primerih, ko brskalnik elementa <canvas> ne podpira. To besedilo ima vlogo nadomestne vsebine.

Koordinatni sistem

Na platnu <canvas> je izhodišče koordinat v zgornjem levem kotu. Točka (0,0) je torej zgoraj levo, vrednosti na osi x naraščajo v desno, vrednosti na osi y pa navzdol.

Tak koordinatni sistem moramo upoštevati pri določanju položaja točk, črt, pravokotnikov, besedila in drugih grafičnih elementov.

Pridobitev 2D-konteksta

Pred risanjem moramo najprej poiskati element <canvas> in nato pridobiti njegov 2D-kontekst. Ta kontekst predstavlja objekt, prek katerega dostopamo do metod za risanje.

<canvas id="primer1" width="200" height="150">
   Vaš brskalnik ne podpira elementa canvas.
</canvas>

<script>
   var primer1 = document.getElementById('primer1');
   var ctx = primer1.getContext('2d');
</script>

Spremenljivka ctx v zgornjem primeru predstavlja risalni kontekst. Z njo lahko nato nastavljamo barve, širino črt, pisavo in druge lastnosti ter izvajamo risanje.

Prvi primer: rdeč pravokotnik

Na platno lahko narišemo preprost polnjen pravokotnik z metodo fillRect(). V spodnjem primeru najprej narišemo obrobo celotnega platna, nato pa še rdeč pravokotnik znotraj njega.

<canvas id="example" width="200" height="150">
   Vaš brskalnik ne podpira elementa canvas.
</canvas>

<script>
   var example = document.getElementById('example');
   var context = example.getContext('2d');

   context.strokeStyle = "gray";
   context.lineWidth = 1;
   context.strokeRect(0, 0, 200, 150);

   context.fillStyle = "rgb(255,0,0)";
   context.fillRect(30, 30, 60, 60);
</script>

Metoda strokeRect() nariše obris pravokotnika, metoda fillRect() pa nariše polnjen pravokotnik. Barvo polnila določimo z lastnostjo fillStyle, barvo obrisa pa z lastnostjo strokeStyle.

Osnovne metode risanja

Pri delu z elementom <canvas> pogosto uporabljamo nekaj osnovnih metod in lastnosti:

• fillRect(x, y, širina, višina) – nariše polnjen pravokotnik,
• strokeRect(x, y, širina, višina) – nariše obris pravokotnika,
• clearRect(x, y, širina, višina) – pobriše del platna,
• fillStyle – določa barvo polnila,
• strokeStyle – določa barvo obrisa,
• lineWidth – določa debelino črte.

Primer: besedilo na platnu

Na platno lahko izpišemo tudi besedilo. Pri tem določimo pisavo in barvo ter uporabimo metodo fillText().

<canvas id="besedilo" width="260" height="80">
   Vaš brskalnik ne podpira elementa canvas.
</canvas>

<script>
   var besedilo = document.getElementById('besedilo');
   var ctxBesedilo = besedilo.getContext('2d');

   ctxBesedilo.font = '24px Arial';
   ctxBesedilo.fillStyle = 'blue';
   ctxBesedilo.fillText('Pozdrav na platnu', 20, 50);
</script>

Primer: črta na platnu

Črte in poti rišemo z metodami za delo s potmi. Najprej začnemo pot, nato določimo začetno in končno točko ter pot narišemo.

<canvas id="crta" width="220" height="100">
   Vaš brskalnik ne podpira elementa canvas.
</canvas>

<script>
   var crta = document.getElementById('crta');
   var ctxCrta = crta.getContext('2d');

   ctxCrta.beginPath();
   ctxCrta.moveTo(20, 20);
   ctxCrta.lineTo(180, 70);
   ctxCrta.lineWidth = 3;
   ctxCrta.strokeStyle = 'green';
   ctxCrta.stroke();
</script>

Kaj lahko rišemo na Canvas

• črte in osnovne like,
• poti in krivulje,
• besedilo,
• slike,
• barvne prelive in sence,
• slikovne pike,
• animacije in interaktivne prizore.

Priporočila

• Elementu <canvas> vedno določi primerno širino in višino.
• Za bolj pregledno kodo najprej pridobi kontekst, nato pa nastavljaj lastnosti in riši.
• Pri zahtevnejših primerih risalno kodo loči v funkcije.
• Nadomestno besedilo znotraj oznake <canvas> naj bo smiselno in jasno.