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.

 

Moja prva grafika v HTML5


Ta vnos je objavil Vinc v Matematika,Osnove Javascripta,Programiranje,Razno in zaznamoval z ,,, . Dodaj zaznamek do trajne povezave .

O Vinc

Končal gimnazijo v Črnomlju 1971, pričel honorarno poučevati na tej gimnaziji v šol.letu 1973/74, se v šol. letu 1976/77 zaposlil kot učitelj matematike, leta 1978 diplomiral iz pedagoške matematike pri dr. Niku Prijatelju s temo Galoisova teorija. Na gimnaziji in poklicni kovinarski šoli učil matematiko, fiziko in računalništvo ter informatiko, dokumentaristiko in arhivistiko. Dolgoletni mentor šahovskega, fotografskega, fizikalnega, računalniškega in<a \href{http://www2.arnes.si/48/sscrnomelj/astro.html}{ astronomskega} krožka. Absolvent 3. stopnje pedagoške fizike, v 90. letih član skupine za prenovo gimnazijske fizike, avtor programske opreme za merilno krmilni vmesnik, soavtor učbenikov za gimnazijo Fizika-Mehanika in Fizika-Elektrika. Mentor trinajstim raziskovalnim nalogam v okviru Gibanja Znanost mladini ter trem raziskovalnim nalogam v okviru Krkinih nagrad in številnim tekmovalcem iz logike, matematike, fizike in računalništva. Mentor \href{http://www2.arnes.si/48/ssnmcrnom5/sola/}{2. spletne strani šole}, pobudnik in od 2007 do 2010 urednik spletnih učilnic Srednje šole Črnomelj. Pobudnik šolske Facebook strani. Več najdete na njegovi \href{http://vincenc.petruna.com/}{spletni strani.}

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja

* Copy This Password *

* Type Or Paste Password Here *