Limbajul Java-Script

Grafica in Java Script

Trasare figuri geometrice folosind marcatorul SVG

Trasarea unei linii:

Trasare linii:

Trasarea unui dreptunghi:

Trasarea unui dreptunghi fara "fill" la o anumita pozitie:

Mai multe dreptunghiuri:

Trasare figuri geometrice folosind marcatorul CANVAS

Trasarea unei linii:

Trasarea unui cerc:

Trasarea unui dreptunghi:

Trasarea unui text:

Afisarea unei imagini:

Dca nu se preincarca imaginea, folosind: src="rae_d.bmp", aceasta nu va fi afisata prin metoda ctx.drawImage(im, 10, 10);

Solutia este preincarcarea imaginii folosind formatul base64.

<center><table bgcolor="Azure" border=0>
<tr><td>
<canvas id="desen07" width="100" height="100" style="border:1px solid #d3d3d3;">
Browser-ul d-voastra nu suporta marcatorul CANVAS.
</canvas>
</td></tr>
</table>
<script>
	var d = document.getElementById("desen07");
	var ctx7 = d.getContext("2d");
	var im7 = new Image();
	im7.src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAZABkDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9Ev8AgsL/AME0vF37e3xJ+E+ueHfDPwj8Yaf4F0zX7G+0vx3fzWsIlv5dJeG4g8vT70MyLYTo25UIEwwTlhX5e/Ev9jmb4V/8FLvh7+yvqH7N37Ms3xC+JXh+XxJpmoW+qltGgt401B2SaVtDWZZMabPgLCwy8fzDLbfZf2gfHv7QX7aP/BRvSdP/AGgv2S/D/iPwDoeg+Lrj4a6HbDw/farPYPqehq13qK3msS2a3EMIs42MLod91LsV03GPrf8AhjTwr/0j5/8AKL4A/wDlrX4xnWeeGmYV1jMfmmH5pLRrG8iaTaulGtGL1TV0t003dHyOe+FuVZzi3jcfh6sqlkm41a8FZbe7TqRj87XfU98/4Ja/8EkfG/7GX7aD/EbWvBXwK8DaJ/whWqeG5IPAup3F1dajcXV9pVxE8yvpdkgjjSxmGS7nMwwoBY1+j1fgx4rb48fsYftj+A9W/ZP/AGP/AAf4N8fax4M8SWmqab4kh8O2NrqumC+0F3nU6XqyBpIJhbqBNIMC7bYj/OyfqX/w8T8Vf9Gt/tAf+DLwX/8ANBXt5dx/wHleEp4XD5tho07Nx5sVTldOTu1KdRykubmV7uzTXSy+kyXhmOVYOGX4GlNU4Xsm5zau3J3lNyk9W927LRaJI/PfVfFP7bWi/wDBT+y074j6N8HPA1jovhjxfY+BfEyeH5tStvGGmLq2grPcvYw64ZrWRlTT5UWWVSgmkQrI3zR+9/8ACe/tKf8ARQ/gd/4bDVP/AJoK+Kv+D5z/AJtd/wC5r/8AcLX4A1w1PAngCpGEJ5VSagrLR6K7lbfvJv5nsrNMUtps/pI/ae+Iv7bWn/thfDC4+EOg/Bz4zePl8HeKI/7NTQZvDltY6Y174eNzO7XeuESyectkqBZFKhpMpJndH+hP/DK/7Sn/AEWz4Hf+Ge1T/wCaWvws/wCDKn/lKb4+/wCyVaj/AOnfR6/p+oqeBPAFSMITyqk1BWWj0V3K2/eTfzBZpiltNn//2Q==';
	im7.onload = function() {
		ctx7.drawImage(im7, 10, 10);
	}
</script>
</td></tr></table></center></b></b>

Diverse aplicatii in care se utilizeaza elemente grafice

Instrument virtual

<html>
<body onLoad="set_ter()";>
<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Termometru<br><br></center> 
<canvas id="desen04" width="100" height="260" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="0" id="ra" min="0" max="700"  onchange="set_ter()"/>
<input id="val_ter" type="text" size="2" value="0" max="700">
<br>
</td></tr></table></center>
<script type="text/javascript">

var ctx4=desen04.getContext("2d");
ctx4.lineWidth = .5;
val_max=700; 
w=desen04.width ;
h=desen04.height/2-20;
var i=0;
function termo(x0,y0,wd,ht,val,vm){
// sterg tot continutul
	ctx4.beginPath();
	ctx4.fillStyle = "#FFFFFF";
	ctx4.fillRect(x0-1,y0-5,wd+40,ht+7);
	ctx4.stroke();	
// desenez contur termometru
	ctx4.beginPath();
	ctx4.moveTo(x0,y0); 
	ctx4.strokeStyle = "rgb(255,0,0)";
	ctx4.lineTo(x0+wd,y0);
	ctx4.lineTo(x0+wd,y0+ht);
	ctx4.lineTo(x0,y0+ht);
	ctx4.lineTo(x0,y0);
	ctx4.stroke();
// desenez gradatii

ctx4.stroke();
	ctx4.beginPath();
	ctx4.strokeStyle = "rgb(120,120,120)";
	ctx4.font = "10px Arial";
	val_a=0;
	for (j = ht; j >=0; j -= 5)
	{
		ctx4.moveTo(x0+wd+2,y0+j); 
		if (j % 25 == 0)
		{
			ctx4.lineTo(x0 + wd + 12,y0 + j);
			ctx4.strokeText(val_a,x0 + wd + 20,y0 + j+3);
			val_a=val_a+Math.round(25*vm/ht);
		}
		else
		{
			ctx4.lineTo(x0 + wd + 7,y0 + j);
		}
	}
	ctx4.stroke();
	ctx4.beginPath();
	ctx4.fillStyle = "#0000ff";
	ctx4.fillRect(x0+1,y0+ht-(val*ht/vm),wd-2,val*ht/vm);
	ctx4.stroke();
}

function set_ter(){
  //val = Math.round(Math.random()*200);
  val= parseInt(document.getElementById('ra').value);
  document.getElementById('val_ter').value=val;
  i++;
  termo(10,10,15,225,val,val_max);
  setTimeout("set_ter()",500);
}
</script>
</body>
</html>

Trasare si sinus si cosinus:

<center><table bgcolor="WhiteSmoke" border =1 width="600"><tr><td>
<center><br>Reprezentari grafice<br><br></center> 
<center><table border="0" width="400"><td><tr>
<canvas id="desen05" width="500" height="260" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<INPUT onclick=sinus() type=button value=Sinus>
<INPUT onclick=cosinus() type=button value=Cosinus>
<INPUT onclick=axe() type=button value=Axa_x>
<INPUT onclick=sterg05() type=button value=Sterg:>
</td></tr></table></center>
</td></tr></table></center>  
<script type="text/javascript">
var ctx5=desen05.getContext("2d");
ctx5.lineWidth = .5; 
w=desen05.width ;
h=desen05.height/2-20;

Reprezentari grafice

Vom relua afisarea consumurilor lunare dar de data aceasta vom elemente grafice:

<html>
<body>
<center><table bgcolor="WhiteSmoke" border =1 width="600"><tr><td>
<center><font size=4 color="blue"> Consumuri energetice lunare</font> (maxim 300 Kwh)</td></center></tr>
<tr><td>
<center><table bgcolor="WhiteSmoke" border =0 width="500"><tr><td>
<center>
	<canvas id="desen3" width="300" height="330" style="border:1px solid #c3c3c3;">
		Your browser does not support the HTML5 canvas tag.
	</canvas>
</center>
<script type="text/javascript">
var ctx3=desen3.getContext("2d");
ctx3.lineWidth = 5; 
wd=desen3.width ;
hd=desen3.height;

function deseneaza3()
{
	// sterg tot continutul
	ctx3.beginPath();
	ctx3.fillStyle = "#FFFFFF";
	ctx3.fillRect(0,0,wd,hd);
	ctx3.stroke();	
	ctx3.beginPath();
    for (i=0; i<12; i++){
		ctx3.strokeStyle = "rgb(0,0,255)"; // blue
		ctx3.lineWidth = 5;
		ctx3.moveTo(20*(i+1),hd); 
		ctx3.lineTo(20*(i+1), hd-consum[i]);
		ctx3.stroke();
		ctx3.strokeStyle = "rgb(255,0,0)"; // red
		ctx3.lineWidth = .5;
		ctx3.strokeText(i+1, 20*i+5, hd); 
		ctx3.strokeText(consum[i], 20*(i+1)-10, hd-10-consum[i]); 
		ctx3.stroke();
	}
}

Imagini in JS

Limbajup JS este des utilizat pentru a gestiona imagini in paginile WEB. O serie de efecte cu imagini, incluse in paginile WEB sun realizatre cu script-uri JS. Sa realizam pentru inceput un joc de lumini.
Aplicatia foloseste functia af_b() care se lanseaza la interval de 0 secunda schimband imagiinile ce reprezinta luminile

<html>
<body>
<center><table bgcolor="WhiteSmoke" border =1 width="400"><tr><td><center>
<script type="text/javascript">
 
</script>
<table width="100%" border=0><tr><td width="30%">
<input type="button" value="Start"onClick="af_b()">
</td><td valign="middle">
<img name="t0".src=but_r.gif">
<img name="t1".src=but_v.gif">
<img name="t2".src=but_r.gif">
<img name="t3".src=but_v.gif">
<img name="t4".src=but_r.gif">
<img name="t5".src=but_v.gif">
<img name="t6".src=but_r.gif">
<img name="t7".src=but_v.gif">
<br>
</td></tr></table>
<script>
document.t0.src="but_v.gif"
document.t1.src="but_r.gif"
document.t2.src="but_v.gif"
document.t3.src="but_r.gif"
document.t4.src="but_v.gif"
document.t5.src="but_r.gif"
document.t6.src="but_v.gif"
document.t7.src="but_r.gif"
</script>
</td></tr></table></center>  
</body>
</html>

    Aplicatia urmatoare foloseste functii JS pentru a afisa diverse imagini selectate din butoane

    Folosindu-ne de tehnica descrisa mai sus, sa afisam o imagine care va fi schimbata cu alta imagine in momentul cand mouse-ul ajunge pe imagine, dupa care revine la imaginea initiala, in momentul cand mouse-ul paraseste imaginea.

    Modificand aplicatia de sus putem obtine un efect de lupa, in sensul ca pe "mouse over" obtinem o imagine marita.
    Este suficient sa pregatim doua fisiere im1.jpg si im1_m.jpg care contin aceeasi imagine dar la rezolutii diferite

     Folosind evenimentele: onmouseover, onmouseout, onclick, vom realiza n comutatoare:

function gen_comut(k){
	
	for(i=k-1;i>=0;i--){
		if(b[i]==0){
			document.write('<img id=\"imag'+i+'\" src=\"but_v.gif\" onmouseover=\"aff_1(\'imag'+i+'\','+i+')\" onclick="aff_2(\'imag'+i+'\','+i+')\" onmouseout="aff_3(\'imag'+i+'\','+i+')\" >');
		}
		else{
			document.write('<img id=\"imag'+i+'\" src=\"but_r.gif\" onmouseover=\"aff_1(\'imag'+i+'\','+i+')\" onclick="aff_2(\'imag'+i+'\','+i+')\" onmouseout="aff_3(\'imag'+i+'\','+i+')\" >');

}
	}
	document.write('</td><td width="120"><div id="aff">Val=</div></td>');
	bin_zec(b);
}
function bin_zec(b){
	val_z=0;
	for(i=0;i<nrb;i++){
		val_z=val_z+b[i]*Math.pow(2,i)	
	}
	
	aff.innerHTML = 'Val='+val_z;
}
var b = new Array();
nrb=32;
var val_z;
for(i=0;i<nrb;i++){
	b[i]=0;	
}
b[0]=1;
b[2]=1;
gen_comut(nrb);
</script>
</td></tr></table></center>  
</body>
</html>

    Sa presupunem ca avem 10 imagini cu numele "im1.jpg" - "im10.jpg" si vrem sa realizam un tabel de imagini.
    Vom folosi instructiuni de ciclare din JS pentru a afisa cele 10 imagini.

    Sa realizam un slide show din imaginile de sus "im1.jpg" - "im10.jpg" .
    Aceste imagini se preincarca intr-o matrice dupa care se vor afisa cu temporizare de 0.8 s

    Pentru a putea controla viteza de afisare a imaginilor vom introduce doua butoane, unul pentru afisare mai rapida respectiv si celalalt pentru afisare mai rara .

<html>
<body>
<center> 
<table bgcolor="White" border =1 width="400"><tr><td align="center" valign="center">
<script type="text/javascript">
delay = 500;
im_nr = 1;
// Preincarcare imagini
imagini = new Array();
for(i = 0; i < 11; i++) {   
imagini[i] = new Image();  
imagini[i].src = "im" + i + ".jpg";
}
function animatie() {   
  document.im_anim.src = imagini[im_nr].src;
  im_nr++;
  if(im_nr > 10) {
      im_nr = 0 ;  
   }
}
function mai_rar()   {   
   document.f_dly.t_dly.value=delay;
   delay+=100;
   if(delay > 4000) 
   delay = 4000;
}
function mai_repede()
{
   document.f_dly.t_dly.value=delay;
   delay-=100;
   if(delay < 0) 
   delay = 0;
}
</script>

<form name=f_dly> Imagini animate cu temporizarea: <input type=text name=t_dly size=3 value=500></form>
<img name="im_anim" src="im_i.jpg" alt="[Imagini animatie]" onLoad="setTimeout('animatie()', delay)">
<br><br>
</td></tr>
<td align="center" valign="center">
<input type="button" value="Mai rar" onClick="mai_rar()">
<input type="button" value="Mai repede" onClick="mai_repede()">
</td></tr></table></center>  
</body>
</html>

Meniuri in JS

Folosindu-ne de functii si imagini putem crea meniuri interesante care combina grafica si marcatorii link.
Mai jos este prezentata sursa unui meniu realizat in Java Script

<html>
<body>
<center><table bgcolor="WhiteSmoke" border =1 width="400"><tr><td>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
men_activ=0; 
function Activ (img){ 
	if (men_activ) { 
		document[img].src=eval(img+'on.src'); 
		} 
	} 
function InActiv(img) { 
	if(men_activ) { 
		document[img].src=eval(img+'off.src');
 		}
 	}

men_activ=1;

/* Preincarcare imagini */
 
meniu0off=new Image(); 
meniu0off.src="meniu0.gif"; 
meniu0on=new Image(); 
meniu0on.src="meniu0_hl.gif";

meniu1off=new Image(); 
meniu1off.src="meniu1.gif"; 
meniu1on=new Image(); 
meniu1on.src="meniu1_hl.gif";

meniu2off=new Image();
meniu2off.src="meniu2.gif"; 
meniu2on=new Image();
meniu2on.src="meniu2_hl.gif";

meniu3off=new Image(); 
meniu3off.src="meniu3.gif"; 
meniu3on=new Image();
meniu3on.src="meniu3_hl.gif";

meniu4off=new Image(); 
meniu4off.src="meniu4.gif"; 
meniu4on=new Image(); 
meniu4on.src="meniu4_hl.gif";

meniu5off=new Image(); 
meniu5off.src="meniu5.gif"; 
meniu5on=new Image(); 
meniu5on.src="meniu5_hl.gif";

//--> 
</SCRIPT>

Utilizarea mouse-ului

    Afisare coordonatelor mouse-ului relativ la pagina web deschisa:

    Afisare coordonatelor mouse-ului relativ la un "div":

    Afisare coordonatelor mouse-ului relativ la un canvas :

    Afisare coordonatelor mouse-ului relativ la o imagine :