<!doctype html>
<html>
<head>
<title>Kalkulaator</title>
<script>
function Arvutaja(kihinimi){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
this.kiht.innerHTML=
"Raadius: <input type='text' id='kast1' /> "+
"<input type='button' value='Ringi pindala' "+
"onClick='a1.arvuta();' /> "+
"<div id='vastus'></div>";
this.kast=document.getElementById("kast1");
this.vastusekiht=document.getElementById("vastus");
}
this.arvuta=function(){
var r=parseFloat(this.kast.value);
this.vastusekiht.innerHTML=3.14*r*r;
}
this.algus();
}
var a1;
function lehealgus(){
a1=new Arvutaja("kiht1");
}
</script>
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Kalkulaator</title>
<script>
function Arvutaja(kihinimi){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
window[kihinimi+"_kalkulaator"]=this;
this.kiht.innerHTML=
"Raadius: <input type='text' id='"+kihinimi+"_kast1' /> "+
"<input type='button' value='Ringi pindala' "+
"onClick='"+kihinimi+"_kalkulaator.arvuta();' /> "+
"<div id='"+kihinimi+"_vastus'></div>";
this.kast=document.getElementById(kihinimi+"_kast1");
this.vastusekiht=document.getElementById(kihinimi+"_vastus");
}
this.arvuta=function(){
var r=parseFloat(this.kast.value);
this.vastusekiht.innerHTML=3.14*r*r;
}
this.algus();
}
function lehealgus(){
new Arvutaja("kiht1");
new Arvutaja("kiht2");
}
</script>
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
<div id="kiht2"></div>
</body>
</html>
<html>
<head>
<title>Kalkulaator</title>
<script>
function Arvutaja(kihinimi, kastitekst, nuputekst, koefitsient){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
window[kihinimi+"_kalkulaator"]=this;
this.kiht.innerHTML=
kastitekst+": <input type='text' id='"+kihinimi+"_kast1' /> "+
"<input type='button' value='"+nuputekst+"' onClick='"+kihinimi+"_kalkulaator.arvuta();' /> "+
"<span id='"+kihinimi+"_vastus'></span>";
this.kast=document.getElementById(kihinimi+"_kast1");
this.vastusekiht=document.getElementById(kihinimi+"_vastus");
this.koefitsient=koefitsient;
}
this.arvuta=function(){
this.vastusekiht.innerHTML=
(parseFloat(this.kast.value)*this.koefitsient).toFixed(2);
}
this.algus();
}
function lehealgus(){
new Arvutaja("kiht1", "Eurod", "Dollariteks", 1.3);
new Arvutaja("kiht2", "Tollid", "Sentimeetriteks", 2.54);
new Arvutaja("kiht3", "Letihind", "Käibemaks", 0.2/1.20);
}
</script>
<meta charset="UTF-8" />
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
<div id="kiht2"></div>
<div id="kiht3"></div>
</body>
</html>
Lisa objekti kujundusse teine tekstiväli, kus saab määrata, millise koguse võrra olemasolevat väärtust kasvatatakse või kahandatakse
<!doctype html>
<html>
<head>
<title>Kalkulaator</title>
<script>
function Laohaldus(kihinimi, kogus){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
this.kogus=kogus;
window[kihinimi+"_ladu"]=this;
this.kiht.innerHTML=
"<input type='button' value='<' onClick='"+
kihinimi+"_ladu.v2iksemaks();' /> "+
"<input type='text' id='"+kihinimi+
"_vastus' style='width: 50px' disabled />"+
"<input type='number' id='"+kihinimi+
"_muutus' style='width: 50px' value='1' />"+
"<input type='button' value='>' onClick='"+kihinimi+
"_ladu.suuremaks();' /> ";
this.vastusekiht=document.getElementById(kihinimi+"_vastus");
this.muutusekast=document.getElementById(kihinimi+"_muutus");
this.kuva();
}
this.kuva=function(){
this.vastusekiht.value=this.kogus;
}
this.v2iksemaks=function(){
this.kogus-=parseInt(this.muutusekast.value);
this.kuva();
}
this.suuremaks=function(){
this.kogus+=parseInt(this.muutusekast.value);
this.kuva();
}
this.algus();
}
function lehealgus(){
new Laohaldus("kiht1", 100);
new Laohaldus("kiht2", 50);
}
</script>
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
<div id="kiht2"></div>
</body>
</html>
Tekstivälja asemel saab muudetava suuruse valida rippmenüüst
<!doctype html>
<html>
<head>
<title>Kalkulaator</title>
<script>
function Laohaldus(kihinimi, kogus, muutused){
this.algus=function(){
this.kiht=document.getElementById(kihinimi);
this.kogus=kogus;
this.muutused=muutused;
window[kihinimi+"_ladu"]=this;
var rippmenyy="<select id='"+kihinimi+"_valik'>";
for(var i=0; i<muutused.length; i++){
rippmenyy+="<option>"+muutused[i]+"</option>";
}
rippmenyy+="</select>";
this.kiht.innerHTML=
"<input type='button' value='<' onClick='"+
kihinimi+"_ladu.v2iksemaks();' /> "+
"<input type='text' id='"+kihinimi+"_vastus' style='width: 50px' disabled />"+
rippmenyy+
"<input type='button' value='>' onClick='"+kihinimi+"_ladu.suuremaks();' /> ";
this.vastusekiht=document.getElementById(kihinimi+"_vastus");
this.muutusevalik=document.getElementById(kihinimi+"_valik");
this.kuva();
}
this.kuva=function(){
this.vastusekiht.value=this.kogus;
}
this.v2iksemaks=function(){
this.kogus-=this.muutused[this.muutusevalik.selectedIndex];
this.kuva();
}
this.suuremaks=function(){
this.kogus+=this.muutused[this.muutusevalik.selectedIndex];
this.kuva();
}
this.algus();
}
function lehealgus(){
new Laohaldus("kiht1", 100, [1, 5, 10, 30, 100]);
new Laohaldus("kiht2", 50, [1, 2, 3]);
}
</script>
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
<div id="kiht2"></div>
</body>
</html>
Lisa nupp laoseisu nullimiseks
ladu5.html
<!doctype html>
<html>
<head>
<title>Kalkulaator</title>
<script src="ladu5.js"></script>
<script>
function lehealgus(){
new Laohaldus("kiht1", 100, [1, 5, 10, 30, 100]);
new Laohaldus("kiht2", 50, [1, 2, 3]);
}
</script>
</head>
<body onload="lehealgus();">
<h1>Arvutamine</h1>
<div id="kiht1"></div>
<div id="kiht2"></div>
</body>
</html>
ladu5.js
function Laohaldus(kihinimi, kogus, muutused){ this.algus=function(){ this.kiht=document.getElementById(kihinimi); this.kogus=kogus; this.muutused=muutused; window[kihinimi+"_ladu"]=this; var rippmenyy="<select id='"+kihinimi+"_valik'>"; for(var i=0; i<muutused.length; i++){ rippmenyy+="<option>"+muutused[i]+"</option>"; } rippmenyy+="</select>"; this.kiht.innerHTML= "<input type='button' value='<' onClick='"+ kihinimi+"_ladu.v2iksemaks();' /> "+ "<input type='text' id='"+ kihinimi+"_vastus' style='width: 50px' disabled />"+ rippmenyy+ "<input type='button' value='X' onClick='"+ kihinimi+"_ladu.nulli();' /> "+ "<input type='button' value='>' onClick='"+ kihinimi+"_ladu.suuremaks();' /> "; this.vastusekiht=document.getElementById(kihinimi+"_vastus"); this.muutusevalik=document.getElementById(kihinimi+"_valik"); this.kuva(); } this.kuva=function(){ this.vastusekiht.value=this.kogus; } this.v2iksemaks=function(){ this.kogus-=this.muutused[this.muutusevalik.selectedIndex]; this.kuva(); } this.suuremaks=function(){ this.kogus+=this.muutused[this.muutusevalik.selectedIndex]; this.kuva(); } this.nulli=function(){ this.kogus=0; this.kuva(); } this.algus(); }
Koosta tsükkel platsile pallide lisamiseks
Lisa platsile parameetrid suuruse kohta pikslites.
Lisa platsile äärejoon ja määra selle kaugus servast
<!doctype html>
<html>
<head>
<title>Kujundid</title>
<script>
function Pall(x, y, r){
this.x=x;
this.y=y;
this.r=r;
this.joonista=function(g){
g.beginPath();
g.arc(this.x, this.y, this.r,
0, 2*Math.PI, true);
g.fill();
}
}
function Plats(kihiId, laius, korgus, servakaugus){
window[kihiId+"_joonis"]=this;
this.servakaugus=servakaugus;
this.alusta=function(){
var sisu=
"<canvas id='"+kihiId+"_tahvel' width='"+laius+
"' height='"+korgus+"' "+
" style='background-color: yellow' ></canvas><br/>";
document.getElementById(kihiId).innerHTML=sisu;
this.kujundid=new Array();
this.tahvel=document.getElementById(kihiId+"_tahvel");
}
this.lisaKujund=function(kujund){
this.kujundid.push(kujund);
this.joonista();
}
this.joonista=function(){
var g=this.tahvel.getContext("2d");
g.beginPath();
g.moveTo(this.servakaugus, this.servakaugus);
g.lineTo(this.tahvel.width-this.servakaugus, this.servakaugus);
g.lineTo(this.tahvel.width-this.servakaugus,
this.tahvel.height-this.servakaugus);
g.lineTo(this.servakaugus,this.tahvel.height-this.servakaugus);
g.lineTo(this.servakaugus, this.servakaugus);
g.stroke();
for(var i=0; i<this.kujundid.length; i++){
this.kujundid[i].joonista(g);
}
}
this.alusta();
}
var kiht1_joonis, kiht2_joonis
function algus(){
//Lisa platsile parameetrid suuruse kohta pikslites
//Lisa platsile äärejoon ja määra selle kaugus servast
kiht1_joonis=new Plats("kiht1", 500, 400, 30);
for(var i=0; i<10; i++){
kiht1_joonis.lisaKujund(new Pall(50+20*i, 50, 5));
}
kiht2_joonis=new Plats("kiht2", 50, 30, 3);
kiht2_joonis.lisaKujund(new Pall(25, 15, 5));
}
</script>
</head>
<body onload="algus();">
<div id="kiht1"></div>
<div id="kiht2"></div>
</body>
</html>
Vektor asukoha ja nihke jaoks. Kahest vektorist Joon ning Joontest Kujundid, mida eraldi liigutada saab. All näites hakkab kumbki kolmnurk omasoodu liikuma.
<!doctype html>
<html>
<head>
<title>Graafika</title>
<script>
function Vektor(x, y){
this.x=x;
this.y=y;
this.tekstina=function(){
return "("+this.x+", "+this.y+")";
}
this.liida=function(v){
return new Vektor(this.x+v.x, this.y+v.y);
}
this.korruta=function(kordaja){
return new Vektor(this.x*kordaja, this.y*kordaja);
}
}
function Joon(p1, p2){
this.punktid=new Array();
this.punktid[0]=p1;
this.punktid[1]=p2;
this.tekstina=function(){
return "Joon: "+this.punktid[0].tekstina()+
" - "+this.punktid[1].tekstina();
}
this.nihuta=function(nihe){
for(var i=0; i<this.punktid.length; i++){
this.punktid[i]=this.punktid[i].liida(nihe);
}
}
this.joonista=function(g){
g.beginPath();
g.moveTo(this.punktid[0].x, this.punktid[0].y);
g.lineTo(this.punktid[1].x, this.punktid[1].y);
g.stroke();
}
this.kopeeri=function(){
return new Joon(this.punktid[0], this.punktid[1]);
}
}
function Kujund(){
this.kujundid=new Array();
this.liikumisSamm=new Vektor(0, 0);
this.lisaKujund=function(k){
this.kujundid.push(k);
}
this.tekstina=function(){
var t="Kujund (";
for(var i=0; i<this.kujundid.length; i++){
t+=this.kujundid[i].tekstina()+"; ";
}
return t+")";
}
this.muudaLiikumisSamm=function(samm){
this.liikumisSamm=samm;
}
this.liigu=function(){
this.nihuta(this.liikumisSamm);
}
this.nihuta=function(nihe){
for(var i=0; i<this.kujundid.length; i++){
this.kujundid[i].nihuta(nihe);
}
}
this.joonista=function(g){
for(var i=0; i<this.kujundid.length; i++){
this.kujundid[i].joonista(g);
}
}
this.kopeeri=function(){
var t=new Kujund();
for(var i=0; i<this.kujundid.length; i++){
t.lisaKujund(this.kujundid[i].kopeeri());
}
return t;
}
}
var v1=new Vektor(30, 50);
var v2=new Vektor(70, 20);
var v3=new Vektor(40, 60);
var j1=new Joon(v1, v2);
var j2=new Joon(v2, v3);
var j3=new Joon(v3, v1);
kolmnurk=new Kujund();
kolmnurk.lisaKujund(j1);
kolmnurk.lisaKujund(j2);
kolmnurk.lisaKujund(j3);
kolmnurk2=kolmnurk.kopeeri();
kolmnurk.muudaLiikumisSamm(new Vektor(1, 0));
kolmnurk2.muudaLiikumisSamm(new Vektor(0, 1));
var g;
function liiguta(){
document.getElementById("kiht1").innerHTML=
kolmnurk.tekstina()+"<br />"+kolmnurk2.tekstina();
g.clearRect(0, 0, 400, 300);
kolmnurk.liigu();
kolmnurk.joonista(g);
kolmnurk2.liigu();
kolmnurk2.joonista(g);
}
function leheAlgus(){
g=document.getElementById("tahvel1").getContext("2d");
setInterval("liiguta();", 500);
}
</script>
</head>
<body onload="leheAlgus()">
<canvas id="tahvel1" width="400" height="300" style="background-color: yellow">
</canvas>
<div id="kiht1"></div>
</body>
</html>
Kaks postirida
<!doctype html>
<html>
<head>
<title>3D</title>
<script>
var keskx=200;
var kesky=150;
var suurendus=10;
function ex(px, py, pz){ //x ekraanil
return keskx+suurendus*px/pz;
}
function ey(px, py, pz){
return kesky-suurendus*py/pz;
}
function joonista(){
var g=document.getElementById("tahvel1").getContext("2d");
g.beginPath();
var x=-20;
var y=40;
for(var z=5; z<50; z+=5){
g.moveTo(ex(x, 0, z), ey(x, 0, z));
g.lineTo(ex(x, y, z), ey(x, y, z));
}
//Lisage ka paremale poole postid
x=20;
for(var z=5; z<50; z+=5){
g.moveTo(ex(x, 0, z), ey(x, 0, z));
g.lineTo(ex(x, y, z), ey(x, y, z));
}
g.stroke();
}
</script>
</head>
<body onload="joonista();">
<canvas id="tahvel1" width="400" height="300"
style="background-color: yellow"/></canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Laiendamine</title>
<script>
String.prototype.tahtedeArv=function(){
return this.length;
}
String.prototype.sonadeArv=function(){
return this.split(" ").length;
}
function leheAlgus(){
var lause="Juku tuli kooli";
document.getElementById("vastus").innerHTML=
lause.tahtedeArv()+" tähte, "+
lause.sonadeArv()+" sõna.";
}
</script>
</head>
<body onload="leheAlgus();">
<div id="vastus"></div>
</body>
</html>
15 tähte, 3 sõna.
Käsklus muudaVektoritKorrutades, jätab objekti samaks, lihtsalt muudab selle x- ja y-koordinaati kordaja jagu. Käsklus uusVektorKorrutades jätab vana vektori muutumatuks, käsust tagastatakse uus vektor, mille võimalik hilisem muutmine enam esialgset vektorit ei sega.
<!doctype html>
<html>
<head>
<title>Laiendamine</title>
<script>
function Vektor(x, y){
this.x=x;
this.y=y;
this.pikkus=function(){
return Math.sqrt(this.x*this.x+this.y*this.y);
}
}
Vektor.prototype.tekstina=function(){
return "("+this.x+", "+this.y+")";
}
Vektor.prototype.muudaVektoritKorrutades=function(kordaja){
this.x=this.x*kordaja;
this.y=this.y*kordaja;
}
Vektor.prototype.uusVektorKorrutades=function(kordaja){
return new Vektor(this.x*kordaja, this.y*kordaja);
}
function leheAlgus(){
var autokiirus=new Vektor(3, 4);
autokiirus.muudaVektoritKorrutades(2);
document.getElementById("vastus").innerHTML=
"Tekstina: "+autokiirus.tekstina()+
" kogukiirus "+autokiirus.pikkus();
var jalgrattakiirus=autokiirus.uusVektorKorrutades(0.2);
alert(jalgrattakiirus.tekstina());
alert(autokiirus.tekstina());
}
</script>
</head>
<body onload="leheAlgus();">
<div id="vastus"></div>
</body>
</html>
(1.2, 1.6)
(6, 8)
Ringile antakse funktsiooni parameetrina kaasa ligipääs teisele ringile. Funktsiooni sees otsustatakse, kas ringid puutuvad omavahel kokku.
<!doctype html>
<html>
<head>
<title>Laiendamine</title>
<script>
function Asukoht(x, y){
this.x=x;
this.y=y;
this.tekstina=function(){
return "("+this.x+", "+this.y+")";
}
}
var a=new Asukoht(0, 0);
function Ring(x, y, r){
Asukoht.call(this, x, y);
this.raadius=r;
this.pindala=function(){
return 3.14*this.raadius*this.raadius;
}
this.kasPuutub=function(r){
var dx=this.x-r.x;
var dy=this.y-r.y;
return Math.sqrt(dx*dx+dy*dy)<this.raadius+r.raadius;
}
}
Ring.prototype=a;
var r1=new Ring(2, 4, 7);
var r2=new Ring(2, 80, 4);
function leheAlgus(){
document.getElementById("vastus").innerHTML=
r1.tekstina()+r2.tekstina()+" puutub: "+r1.kasPuutub(r2);
}
</script>
</head>
<body onload="leheAlgus();">
<div id="vastus"></div>
</body>
</html>
(2, 4)(2, 80) puutub: false
Ringe on rohkem. Kõik algul oleva ringiga kokku puutuvad ringide muutujad kopeeritakse eraldi massiivi ning sealt trükitakse välja.
<!doctype html>
<html>
<head>
<title>Laiendamine</title>
<script>
function Asukoht(x, y){
this.x=x;
this.y=y;
this.tekstina=function(){
return "("+this.x+", "+this.y+")";
}
}
var a=new Asukoht(0, 0);
function Ring(x, y, r){
Asukoht.call(this, x, y);
this.raadius=r;
this.pindala=function(){
return 3.14*this.raadius*this.raadius;
}
this.kasPuutub=function(r){
var dx=this.x-r.x;
var dy=this.y-r.y;
return Math.sqrt(dx*dx+dy*dy)<this.raadius+r.raadius;
}
}
Ring.prototype=a;
var ringid=new Array();
ringid[0]=new Ring(2, 4, 7);
ringid[1]=new Ring(2, 80, 4);
ringid[2]=new Ring(2, 8, 4);
ringid[3]=new Ring(20, 4, 40);
ringid[4]=new Ring(10, 10, 14);
function leheAlgus(){
var puutuvad=new Array();
for(var i=1; i<ringid.length; i++){
if(ringid[0].kasPuutub(ringid[i])){
puutuvad.push(ringid[i]);
}
}
var t="Tabatud: ";
for(var i=0; i<puutuvad.length; i++){
t+=puutuvad[i].tekstina();
}
document.getElementById("vastus").innerHTML=t;
}
</script>
</head>
<body onload="leheAlgus();">
<div id="vastus"></div>
</body>
</html>
Tabatud: (2, 8)(20, 4)(10, 10)
<!doctype html>
<html>
<head>
<title>Ringi arvutused</title>
<script>
var keskx=200;
var kesky=150;
var tekstiraadius=100;
var ringiraadius=90;
var siseraadius=80;
var nurk=Math.PI/2;
var punktidearv=12;
var nurgavahe=2*Math.PI/punktidearv;
function joonista(){
var g=document.getElementById("t1").getContext("2d");
nurk-=nurgavahe;
g.textAlign="center";
g.textBaseline="middle";
for(var i=1; i<=punktidearv; i++){
g.fillText(i, keskx+tekstiraadius*Math.cos(nurk),
kesky-tekstiraadius*Math.sin(nurk));
g.beginPath();
g.moveTo(keskx+ringiraadius*Math.cos(nurk),
kesky-ringiraadius*Math.sin(nurk));
g.lineTo(keskx+siseraadius*Math.cos(nurk),
kesky-siseraadius*Math.sin(nurk));
g.stroke();
nurk-=nurgavahe;
}
}
</script>
</head>
<body onload="joonista();">
<h1>Ruudud ringjoonel</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow" ></canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Nurga leidmine</title>
<script>
var keskx=200;
var kesky=150;
var ringiraadius=30;
function hiirLiigub(e){
var tahvlikoht=document.getElementById("t1").
getBoundingClientRect();
var g=document.getElementById("t1").getContext("2d");
g.clearRect(0, 0, 400, 300);
var hx=e.clientX-tahvlikoht.left;
var hy=e.clientY-tahvlikoht.top;
var nurk=Math.atan2(hy-kesky, hx-keskx);
g.beginPath();
g.arc(keskx, kesky, ringiraadius, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.arc(keskx, kesky, 5, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.moveTo(keskx+ringiraadius*Math.cos(nurk),
kesky+ringiraadius*Math.sin(nurk));
g.lineTo(keskx, kesky);
g.stroke();
}
</script>
</head>
<body onload="hiirLiigub(event)">
<h1>Ruudud ringjoonel</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow"
onmousemove="hiirLiigub(event)"></canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Nurga leidmine</title>
<script>
var kujundid=new Array();
function KeeratavNupp(x, y, r){
this.x=x;
this.y=y;
this.r=r;
this.nurk=0;
this.joonista=function(g){
g.beginPath();
g.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.arc(this.x, this.y, 5, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.moveTo(this.x+this.r*Math.cos(this.nurk),
this.y+this.r*Math.sin(this.nurk));
g.lineTo(this.x, this.y);
g.stroke();
}
}
function joonista(){
var g=document.getElementById("t1").getContext("2d");
g.clearRect(0, 0, 400, 300);
for(var i=0; i<kujundid.length; i++){
kujundid[i].joonista(g);
}
}
kujundid.push(new KeeratavNupp(100, 100, 30));
kujundid.push(new KeeratavNupp(200, 100, 30));
</script>
</head>
<body onload="joonista();">
<h1>Ruudud ringjoonel</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow" ></canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Nurga leidmine</title>
<script>
function KeeratavNupp(x, y, r){
this.x=x;
this.y=y;
this.r=r;
this.nurk=0;
this.joonista=function(g){
g.beginPath();
g.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.arc(this.x, this.y, 5, 0, 2*Math.PI, true);
g.stroke();
g.beginPath();
g.moveTo(this.x+this.r*Math.cos(this.nurk),
this.y+this.r*Math.sin(this.nurk));
g.lineTo(this.x, this.y);
g.stroke();
}
this.kasPihtas=function(hx, hy){
var dx=hx-this.x;
var dy=hy-this.y;
return dx*dx+dy*dy<this.r*this.r;
}
this.muudaNurk=function(hx, hy){
this.nurk=Math.atan2(hy-this.y, hx-this.x);
}
}
function KujunditeHaldus(tahvliId){
this.kujundid=new Array();
this.tahvliId=tahvliId;
this.joonista=function(){
var g=document.getElementById(this.tahvliId).getContext("2d");
g.clearRect(0, 0, 400, 300);
for(var i=0; i<this.kujundid.length; i++){
this.kujundid[i].joonista(g);
}
}
this.lisaKujund=function(kujund){
this.kujundid.push(kujund);
}
this.hiir=function(e){
var tahvlikoht=document.getElementById(this.tahvliId).
getBoundingClientRect();
var hx=e.clientX-tahvlikoht.left;
var hy=e.clientY-tahvlikoht.top;
for(var i=0; i<this.kujundid.length; i++){
if(this.kujundid[i].kasPihtas(hx, hy)){
this.kujundid[i].muudaNurk(hx, hy);
}
}
this.joonista();
}
}
var haldus=new KujunditeHaldus("t1");
haldus.lisaKujund(new KeeratavNupp(100, 100, 30));
haldus.lisaKujund(new KeeratavNupp(200, 100, 30));
</script>
</head>
<body onload="haldus.joonista();">
<h1>Ruudud ringjoonel</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow"
onmousemove="haldus.hiir(event)"></canvas>
</body>
</html>
Planeet tiirleb ringjoonel, kaaslane ümber planeedi.
<!doctype html>
<html>
<head>
<title>Ringi arvutused</title>
<script>
var keskx=200;
var kesky=150;
var ringiraadius=100;
var nurk=0;
var nurgavahe=0.01; //radiaani
var nurgavahe2=0.3; //radiaani
var nurk2=Math.PI/2;
function liigu(){
var g=document.getElementById("t1").getContext("2d");
g.clearRect(0, 0, 400, 300);
var x1=keskx+ringiraadius*Math.cos(nurk);
var y1=kesky-ringiraadius*Math.sin(nurk);
g.fillRect(x1, y1, 5, 5);
g.fillRect(x1+15*Math.cos(nurk2),
y1-15*Math.sin(nurk2), 5, 5);
nurk+=nurgavahe;
nurk2+=nurgavahe2;
}
</script>
</head>
<body onload="setInterval('liigu()', 50);">
<h1>Ringjoone parameetriline võrrand</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow" ></canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Ringi arvutused</title>
<script>
function Liikur(x, y, kiirus, nurk, nurgamuutus){
this.algus=function(){
this.x=x;
this.y=y;
this.kiirus=kiirus;
this.nurk=nurk;
this.nurgamuutus=nurgamuutus;
}
this.liigu=function(){
this.nurk+=this.nurgamuutus;
this.x+=this.kiirus*Math.cos(this.nurk);
this.y+=this.kiirus*Math.sin(this.nurk);
}
this.muudaNurk=function(uusNurk){
this.nurk=uusNurk;
}
this.uusRooliAsend=function(uusAsend){
this.nurgamuutus=uusAsend;
}
this.joonista=function(g){
g.beginPath();
g.arc(this.x, this.y, 10, 0, 2*Math.PI, false);
g.stroke();
g.beginPath();
g.moveTo(this.x,this.y);
//Joone ots
var jotsx=this.x+10*this.kiirus*Math.cos(this.nurk);
var jotsy=this.y+10*this.kiirus*Math.sin(this.nurk);
g.lineTo(jotsx, jotsy);
var rattapikkus=10;
var rattanurk=this.nurk+3*this.nurgamuutus;
var rattaotsx=jotsx+rattapikkus*Math.cos(rattanurk);
var rattaotsy=jotsy+rattapikkus*Math.sin(rattanurk);
g.lineTo(rattaotsx, rattaotsy)
g.stroke();
}
this.algus();
}
function Rool(keskx, kesky, raadius, nurk){
this.algus=function(){
this.keskx=keskx;
this.kesky=kesky;
this.raadius=raadius;
this.nurk=nurk;
}
this.kysiNurk=function(){
return this.nurk+Math.PI/2;
}
this.joonista=function(g){
g.beginPath();
g.arc(this.keskx, this.kesky, this.raadius,
this.nurk-0.4, this.nurk+0.4, false);
g.stroke();
g.beginPath();
g.arc(this.keskx+this.raadius*Math.cos(this.nurk),
this.kesky+this.raadius*Math.sin(this.nurk),
5, 0, 2*Math.PI, false);
g.stroke();
g.save();
g.translate(this.keskx, this.kesky);
g.rotate(this.nurk+(Math.PI/2));
g.fillText("Rool", 0, 0);
g.restore();
}
this.uusNurk=function(hx, hy){
this.nurk=Math.atan2(hy-kesky, hx-keskx);
}
this.algus();
}
var auto1=new Liikur(100, 100, 1, Math.PI/3, -0.1);
var rool1=new Rool(50, 100, 30, -Math.PI/2);
function hiirLiigub(e){
var tahvlikoht=document.getElementById("t1").getBoundingClientRect();
var hx=e.clientX-tahvlikoht.left;
var hy=e.clientY-tahvlikoht.top;
rool1.uusNurk(hx, hy);
}
var ringx=200, ringy=150, ringr=30, ringideArv=0;
function ringLiiklus(){
var dx=auto1.x-ringx;
var dy=auto1.y-ringy;
if(Math.sqrt(dx*dx+dy*dy)<ringr+10){
auto1.x=100; auto1.y=100;
}
}
function liigu(){
var g=document.getElementById("t1").getContext("2d");
g.clearRect(0, 0, 400, 300);
auto1.uusRooliAsend(rool1.kysiNurk()/10);
ringLiiklus();
var vanax=auto1.x;
auto1.liigu();
if(auto1.y<ringy){
if(vanax>ringx && auto1.x<ringx){ringideArv++;}
if(vanax<ringx && auto1.x>ringx){ringideArv--;}
}
auto1.joonista(g);
rool1.joonista(g);
g.beginPath();
g.arc(ringx, ringy, ringr, 0, 2*Math.PI, true);
g.fill();
g.fillText("ringe: "+ringideArv, 300, 30);
g.beginPath();
g.moveTo(ringx, ringy);
g.lineTo(ringx, 0);
g.stroke();
}
</script>
</head>
<body onload="setInterval('liigu()', 50);">
<h1>Ringjoone parameetriline võrrand</h1>
<canvas id="t1" width="400" height="300"
style="background-color: yellow"
onmousemove="hiirLiigub(event)"></canvas>
</body>
</html>
