Grafika na spletni strani, Javascript in HTML5 -

Matematik želi prikazati matematično grafiko na zaslonu, po možnosti na spletni strani in -še bolj zaželjeno – po možnosti dinamično. Na začetku je te prikaze sprogramiral sam. Nato pa je bila v preteklih desetletjih razvita vrsta orodij, od tistih za prikaz grafov do orodij za modeliranje, ki se uporabljajo namensko npr. v strojništvu, gradbeništvu. Programiranje je domala izginilo, sploh pa iz šol. Slovenske firme danes vneto iščejo programerje, v glavnem brezuspešno. Nekatere jih morajo celo uvažati iz vzhodnih držav.

Sam sem se z dijaki precej ukvarjal z računalniško grafiko, najprej v strem dobrem Turbo Pascalu v operacijskem sistemu DOS, pod Okni pa v nadaljevanju Pascala – programu Delphi. Dijaki so znali napisati samostojne grafične aplikacije, pretežno simulacije fizikalnih pojavov, in ti programi so se preko orodja Activex dali zaganjati tudi preko spleta. Napredno za tiste čase ob koncu tisočletja, a tudi povezano s težavami. Brskalnik je moral imeti varnostne nastavitve znižane, Delphi pa je bil plačljiv program in je kar nenadoma izginil, skupaj s svojo različico Kilix za Linux.

Sredi prejšnjega desetletja sem na nekem seminarju opazoval predavatelja, kako uspešno je zganjal grafiko na spletni strani z običajnim Javascriptom. Prikaz mi je bil zelo všeč, dosti manj pa koda. Sem pač scrkljan tako od Pascala in Delphija, da ko slišim C++, skoraj dobim ošpice, največ, kar lahko še prezvečim, je Python. Poleg tega se mi je zdelo, da uporablja trike iz CSS. Kljub temu sem napisal nekaj kratkih programov v Javascriptu, pa jih tudi hitro pozabil zaradi obilice drugega dela.

Potem pa mi je prišel v roke standard zadnje verzije HTML-ja, torej HTML 5.0. Podpirajo ga vsi moderni brskalniki, pa tudi mobilne priprave. Postal sem pozoren na njegovo podporo grafiki in sklenil sem, da spet poskusim. Tole je (s pomočjo priročnika seveda) pravkar ratalo. Ni bogvekaj in nič ne miga, je pa dokaz, da se da:

<html>
<head>
	<style type="text.css">
		canvas {border: 1px solid black}
	</style>
</head>
<body>
<h3>Moja prva grafika v HTML5</h3>
<canvas id="mycanvas" width="800" height="500"></canvas>
<script language ="Javascript">
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');
c.fillStyle="red";
c.fillRect(0,0,20,10);

c.lineWidth=1;
c.beginPath();
c.moveTo(0,100);
c.lineTo(201,100);
c.stroke()

c.beginPath();
c.moveTo(100,0);
c.lineTo(100,120);
c.stroke()

for (i=-100;i<100;i++)
{
c.fillStyle="black";
c.lineColor="red";
c.lineWidth=3;
c.beginPath();
c.moveTo(i+100,100-i*i/100);
c.lineTo(i+101,100-i*i/100);
c.stroke()
}
</script>

</body>
</html>

zgornja koda nam da naslednji graf kvadratne funkcije:

HTML5 ima navo značko platno <canvas>, na katerega lahko rišemo na spletni strani. Canvas je poznal tudi Delphi, zato je pojem poznan. Nanj rišemo z ukazi iz Javascripta, kot so drawRect, fill in drawImage.