Ferde vonal megjelenítése, Math.sin( ); és Math.cos( ); függvényekkel

Ferde vonal megjelenítése!! A for ciklus által kiszámolt eredmények. "y" és "x" értékek alapján:

<script language="JavaScript" type="text/javascript" >
// t= pontok közötti távolság mértékével, tetszőlegesen véltoztatható
// f= vonal, tetszőleges fokban történő elmozdítása: 0=jobbra vízszintes, 1.57=függőleges le; 3.14=balra vízszintes; 4.713;= függőleges fel;

var a=0; f=3.8; t=1;
for (a=0; a < 201; a++) {
y=150+ a*t* Math.sin(f);
x=300+ a*t* Math.cos(f);
document.write ('<span id="pontok" style="position: absolute; width:1px; height: 1px; margin-top:'+y+'; margin-left:'+x+'"> . </span>');
}
</script>

---

Egyszerre több vonal megjelenítése.

Tetszőleges számú vonalat jeleníthetünk meg, a for cikluson belül.
De, minden egyes vonalnak rendelkezni kell:
- Vonalra jellemző matematikai képlettel, mely meghatározza y és x (absolute) értékét
- Document.write kiíratással, mely az adott vonalat jeleníti meg.

A példában:
- Minden vonal kiindulási pontja megegyezik, y=100; x=300; Így a vonalak, egy adott pontból indulnak ki. Ha y vagy x értékét minden vonalnál, más és más értékre állítjuk, akkor a vonalak elkülönülnek egymástól.
- Minden vonalnál, más és más az " f " változó értéke, melynek hatására más és más irányba mutatnak a vonalak

Megjelenő vonalak hosszát, a következők határozzák meg:
- A for ciklus lefuttatásának száma, azaz hányszor fut le a ciklus.
- A t változónak adott érték, mely a pontok közötti távolságot határozza meg.

Tetszőleges vonal megjelenése:

<div class="bemutato">
<script language="JavaScript" type="text/javascript" >
// t= pontok közötti távolság mértékével, tetszőlegesen változtatható
// f= vonal, tetszőleges fokban történő elmozdítása: 0=jobbra vízszintes, 1.57=függőleges le; 3.14=balra vízszintes; 4.713;= függőleges fel;

var a=0; t=1; f=0.1; f1=1.2; f2=3; f3=4;

for (a=0; a < 100; a++) { //a<100 a vonal hosszát határozza meg
y=100+a*t* Math.sin(f);
x=300+a*t* Math.cos(f);
document.write ('<span id="pontok" style="position: absolute; width:1px; height: 1px; margin-top:'+y+'; margin-left:'+x+'">.</span>');

y1=100+a*t* Math.sin(f1);
x1=300+a*t* Math.cos(f1);
document.write ('<span id="pontok" style="position: absolute; width:1px; height: 1px; margin-top:'+y1+'; margin-left:'+x1+'">.</span>');

y2=100+a*t* Math.sin(f2);
x2=300+a*t* Math.cos(f2);
document.write ('<span id="pontok" style="position: absolute; width:1px; height: 1px; margin-top:'+y2+'; margin-left:'+x2+'">.</span>');

y3=100+a*t* Math.sin(f3);
x3=300+a*t* Math.cos(f3);
document.write ('<span id="pontok" style="position: absolute; width:1px; height: 1px; margin-top:'+y3+'; margin-left:'+x3+'">.</span>');

}
</script>
</div>

Emlékeztető

Körvonal pontjainak, pixel léptékű kiszámolása

 

 

 

 

 

 

Vissza a lap elejére