mgr inż. Wacław Libront * Bobowa 2017-2019

ZSO Bobowa, ul. Długoszowskich 1, 38-350 Bobowa, tel: 0183514009, fax: 0183530221, email: sekretariat@zsobobowa.eu, www: zsobobowa.eu

Lekcja 2

Trygonometria w JS

  1. kwadrat
  2. obrót
  3. gwiazdy

Obrotowy kwadrat
Jak narysować pochylony prostokąt (kwadrat)? Wykorzystamy nieco zmodyfikowaną (w stosunku do poprzedniej lekcji) funkcję ODCINEK, która umie rysować linie pod dowolnym kątem i w kolorze kol. Kąt liczony jest przeciwnie do ruchu wskazówek zegara.

Funkcja KWA(x,y,bok,kat,kol) rysuje kwadrat o początku w punkcie x i y w lewym dolnym rogu, kwadrat o boku bok i kolorze kol jest pochylony o kąt kat przeciwnie do ruchu wskazówek zegara.

<canvas width="400" height="400" id="can">
</canvas>

<script>
  var c = can.getContext("2d");

function ODCINEK(x,y,bok,kat,kol){
 var x1=x+bok*Math.cos(kat*Math.PI/180);
 var y1=y-bok*Math.sin(kat*Math.PI/180);
 c.strokeStyle=kol;
 c.beginPath();
 c.moveTo(x,y);
 c.lineTo(x1,y1);
 c.stroke();
 return {x1,y1};
}

function KWA(x,y,bok,kat,kol){
 var p=ODCINEK(x,y,bok,kat-90,kol);
 p= ODCINEK(p.x1,p.y1,bok,kat,kol);
 p= ODCINEK(p.x1,p.y1,bok,kat+90,kol);
 ODCINEK(p.x1,p.y1,bok,kat+180,kol);
}

//kwadratowa serwetka
for (var k=0;k<360;k=k+5){
  KWA(300,300,100,k,'blue');
}
  
</script>

Pętla for tworzy kąty od 0 do 360, co 5 stopni i rysowane są identyczne kwadraty, obrócone wokół jednego rogu. Obszar canvas został powiększony 400x400 pikseli.

Kolejna pętla przesuwa obrócone o 45 stopni kwadraty w prawo

//przesunięte kwadraty
for (var i=0;i<10;i++){
  KWA(10+i*20,80,100,45,'red');
}

Obrót wokół środka
Jak narysować kwadrat tak, aby jego początek znajdował się w środku? Należy przesunąć początek o połowę przekątnej pod kątem 135 stopni, a następnie posłużyć się funkcją KWAS.

Z pomocą nowej funkcji możemy narysować wiatrak składający się z odcinków, na końcach których znajdują się kwadraty.  Funkcja KWAS korzysta z funkcji ODCINEK.

function KWAS(xs,ys,bok,kat,kol){
  //przekatna
  var k=kat+135;
  var b=bok*Math.sqrt(2)/2;
  var x1=xs+b*Math.cos(k*Math.PI/180);
  var y1=ys-b*Math.sin(k*Math.PI/180);
  c.moveTo(x1,y1);
  //kwadrat
  var p=ODCINEK(x1,y1,bok,kat-90,kol);
  p= ODCINEK(p.x1,p.y1,bok,kat,kol);
  p= ODCINEK(p.x1,p.y1,bok,kat+90,kol);
  ODCINEK(p.x1,p.y1,bok,kat+180,kol);
}

//wiatraczek
for (var k=0;k<360;k=k+15){
  var p=ODCINEK(150,150,100,k,'red');
  KWAS(p.x1,p.y1,20,k,'blue');
}

Gwiazdy
 Kolejną geometryczną figurą jest romb, za pomocą którego będziemy mogli rysować dowolne symetryczne gwiazdy.

 

 

function ROMB(x,y,bok,katw,kat,kol){
  var p;
  p=ODCINEK(x,y,bok,kat+katw,kol);
  p=ODCINEK(p.x1,p.y1,bok,kat,kol);
  p=ODCINEK(p.x1,p.y1,-bok,kat+katw,kol);
  p=ODCINEK(p.x1,p.y1,-bok,kat,kol);
}

function GWIAZDA(x,y,bok,kat,ile,kol){
  var katw=360/ile;
  for (var i=0;i<ile;i++)
    ROMB(x,y,bok,katw,katw*i,kol);

}

Szablon

<canvas width="400" height="400" id="can"></canvas>
<script>
  var c = can.getContext("2d");



</script>