Kör rajzolása, sinus alfa és cosinus alfa értékekkel

Kör megjelenítése

<script language="JavaScript" type="text/javascript" >

var r=100; // A kör sugara
var fok=0; // Azon fok, mely sin és cos értékét határozza meg
var Y=100; X=200; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron
for (i=0; i < 361; i++) { // 360-szor futtatjuk le a ciklust, így a fokok 0 - tól 360 - ig változnak.

//A 180 osztó helyett írhatunk mást is.(1=2pont; 2=4pont, 3=6pont; 4=8; 7=14 8=16; 9=36; 5=10; 10=20; 20=40; stb.)
//6=12, óra számlapja, 30=60; óra számlap, perceinek elosztása
b=Math.sin(fok * Math.PI / 180);
a=Math.cos(fok * Math.PI / 180);

y=Y-r*a; //Kör rajzolásánál kivonunk (-) vagy összeadunk (+) teljesen mindegy
x=X+r*b; //Kör rajzolásánál kivonunk (-) vagy összeadunk (+) teljesen mindegy

document.write ('<span id="korpontok05" style="position: absolute; width:1px; height: 1px; margin-top:'+y+'; margin-left:'+x+'">.</span>');

fok++; // fok értékét minden lefutás végén +1 értékkel növeljük
}
</script>

---

Kör megrajzolása 4 darab körív összeillesztésével

Kör megjelenítéséhez, és animációkhoz

A körívek egyenkénti megjelenése:

<script language="JavaScript" type="text/javascript" >

var r=100; // A kör sugara
var fok01=0; // Azon fok, mely sin és cos értékét határozza meg
var Y=100; X=200; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron
for (i=0; i < 90; i++) { // 90-szer futtatjuk le a ciklust így 0 és 90 fok értékét számolhatjuk ki. Most, 180-270-360 foknak nincs értelme
// sin, cos 3;6 = óra számlapja, azaz 30 fokonként jelennek meg a pontok.(1 és 2=4pont, 4=8; 7=28pont 8=16; 9=36; 5 és 10=20; 20=40; 30=60;) 180-értéknél elkülönülő pontokból áll a kör
b01=Math.sin(fok01 * Math.PI / 180);
a01=Math.cos(fok01 * Math.PI / 180);

// 12-3 óra
y01=Y-r*a01;
x01=X+r*b01;
document.write ('<span id="korpontok01" style="position: absolute; width:1px; height: 1px; margin-top:'+y01+'; margin-left:'+x01+'">.</span>');

// 3-6 óra
y02=Y+r*a01;
x02=X+r*b01;
document.write ('<span id="korpontok02" style="position: absolute; width:1px; height: 1px; margin-top:'+y02+'; margin-left:'+x02+'">.</span>');

// 6-9 óra
y03=Y+r*a01;
x03=X-r*b01;
document.write ('<span id="korpontok03" style="position: absolute; width:1px; height: 1px; margin-top:'+y03+'; margin-left:'+x03+'">.</span>');

// 9-12 óra
y04=Y-r*b01;
x04=X-r*a01;
document.write ('<span id="korpontok04" style="position: absolute; width:1px; height: 1px; margin-top:'+y04+'; margin-left:'+x04+'">.</span>');

fok01++; // fok értékét minden lefutás végén +1 értékkel növeljük
}
</script>

Tetszöleges sugárral rajzolt kör

Előzőekben ismertetett körök pontjai, az átmérő növelésével arányosan, távolodnak egymástól.
Mivel, a kör pontjainak száma végtelen, ne kísérletezzünk olyan ciklussal, mely a végtelenségig fusson, hogy minden pontot megjelenítsen, mert lefagyhat a böngésző program.
A monitorok felbontásából adódóan, kör megjelenítéséhez, a következő képlet elfogadható
- A sugár értékét osszuk 100-al, majd szorozzuk 360 fokkal. Az így kapott értékkel egyezik meg a ciklus lefutások száma.
- A sugár értékét osszuk 100-al, majd szorozzuk 180 fokkal. Az így kapott értékkel, visszaosztjuk, a sinus és cosinus képletet

Kör átmérő, tetszőleges növelése:

<script language="JavaScript" type="text/javascript" >

var r=250; // A kör sugara
var ciklus=(r/100)*360;
var fokolo=(r/100)*180;
var fok=0; // Azon fok, mely sin és cos értékét határozza meg
var Y=100; X=300; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron
for (i=0; i < ciklus; i++) {

b=Math.sin(fok * Math.PI / fokolo);
a=Math.cos(fok * Math.PI / fokolo);

// 12-3 óra y=Y-r*a; //Kör rajzolásánál kivonunk (-) vagy összeadunk (+) teljesen mindegy
x=X+r*b; //Kör rajzolásánál kivonunk (-) vagy összeadunk (+) teljesen mindegy
document.write ('<span id="korpontok05" style="position: absolute; margin-top:'+y+'; margin-left:'+x+'">.</span>');

fok++; // fok értékét minden lefutás végén +1 értékkel növeljük
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Vissza a lap elejére