Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="UTF-8"/>
- </head>
- <body>
- <canvas id="rys1" width="500" height="500" style="border: 1px solid"></canvas><br>
- <canvas id="rys2" width="500" height="120" style="border: 1px solid"></canvas>
- <!--
- <br><br>
- <p>Podziękowania dla tej strony (<a href="https://www.scriptol.com/html5/canvas/circle.php" target="_blank">https://www.scriptol.com/html5/canvas/circle.php</a>) za olśnienie z wycinkiem :D
- TODO:
- - wsio w canvasie (rysunki, zegar, legenda kolorów)
- - możliwość zmiany kolorów przez input type="color"
- NIE KASOWAĆ TEGO KOMENTARZA!!! (dotyczy autora, do odwołania)
- -->
- <script>
- var konce_lekcji = [700, 750, 840, 930, 1015, 1115, 1205, 1255, 1345, 1435, 1525];
- const czas_lekcji = 45;
- var nr_kon_lekc = -1;
- function DodajZeroWiodace(l)
- {
- var w = l;
- if(l < 10) w = "0" + l;
- return w;
- }
- function MinutyWyraz(m)
- {
- var wyr = "minut";
- var dzies = Math.floor(m % 100 / 10);
- var jedn = m % 10;
- if (m == 1) wyr += "a";
- else if ((dzies == 0 || (dzies >= 2 && dzies <= 9)) && (jedn >= 2 && jedn <= 4))
- wyr += "y";
- return wyr;
- }
- function ZnajdzNrTabKoncaLekcji(d)
- {
- var t_czas = "" + d.getHours() + DodajZeroWiodace(d.getMinutes()),
- l_czas = parseInt(t_czas),
- i = 0,
- n = -1;
- while (n == -1 && i < konce_lekcji.length)
- {
- if (l_czas <= konce_lekcji[i]) n = i;
- ++i;
- }
- return n;
- }
- function ObliczCzasDoKonca(teraz, nr)
- {
- var d = new Date();
- var godz = Math.floor(konce_lekcji[nr] / 100);
- var min = konce_lekcji[nr] - godz * 100;
- d.setHours(godz);
- d.setMinutes(min);
- d.setSeconds(d.getSeconds());
- var roznica = d - teraz;
- var minuty = Math.round(roznica / 60000);
- return minuty;
- }
- function RysujKolo(ctx, x, y, r, wypelnienie, wsp_pi = 2, wycinek = false)
- {
- ctx.beginPath();
- ctx.arc(x,y,r,0,wsp_pi*Math.PI);
- if (wycinek) ctx.lineTo(x,y);
- if (wypelnienie)
- {
- ctx.fillStyle = wypelnienie;
- ctx.fill();
- }
- else ctx.stroke();
- if (wycinek) ctx.closePath();
- }
- const kolo_kolor = "red",
- kolo_kolor_czas = "green",
- prost_kolor = "green",
- prost_kolor_czas = "#d1c134",
- tekst_kolor = "black",
- tekst_czcionka = "Verdana",
- tekst_prop = 0.45;
- function RysujWKole(kontekst, x, y, szer, wys, minuty, czas_lekcji)
- {
- var kolo_x = x + (szer / 2),
- kolo_y = x + (wys / 2),
- kolo_r,
- wspolczynnik_pi = (minuty / czas_lekcji) * 2;
- if (szer <= wys) kolo_r = (szer / 2);
- else kolo_r = (wys / 2);
- kolo_r--;
- RysujKolo(kontekst, kolo_x, kolo_y, kolo_r, kolo_kolor);
- RysujKolo(kontekst, kolo_x, kolo_y, kolo_r, kolo_kolor_czas, wspolczynnik_pi, true);
- }
- function RysujWProstokacie(kontekst, x, y, szer, wys, minuty, czas_lekcji)
- {
- const napis_wys = wys - 1, //wysokość tekstu (położenie Y)
- napis_czas_lekc = czas_lekcji+ "", //czas lekcji przekonwertowany na napis
- napis_czas_do_konca = minuty + " " + MinutyWyraz(minuty), //minuty do końca przekonwertowane na napis wraz z dopiskiem minut[a/y]
- prost_szer_czas = szer * (minuty / czas_lekcji); //szerokość prostokąta czasu do końca lekcji
- kontekst.fillStyle = prost_kolor;
- kontekst.fillRect(x, y, szer, wys);
- kontekst.fillStyle = prost_kolor_czas;
- kontekst.fillRect(x, y, prost_szer_czas, wys);
- kontekst.fillStyle = tekst_kolor;
- kontekst.font = (wys * tekst_prop) + "px " + tekst_czcionka;
- const napis_czas_do_konca_szer = kontekst.measureText(napis_czas_do_konca).width, //szerokość w pikselach napisu z czasem do końca
- napis_czas_do_konca_x = x + (szer - napis_czas_do_konca_szer) / 2; //współrzędna X dla ww. napisu (wyśrodkowane względem całej szerokości)
- napis_czas_lekc_szer = kontekst.measureText(napis_czas_lekc).width; //szerokość w pikselach napisu z czasem lekcji
- napis_czas_lekc_x = x + (szer - napis_czas_lekc_szer); //współrzędna X dla ww. napisu (po prawej stronie prostokąta)
- kontekst.fillText("0", x, napis_wys);
- kontekst.fillText(napis_czas_do_konca, napis_czas_do_konca_x, napis_wys);
- kontekst.fillText(czas_lekcji+"", napis_czas_lekc_x, napis_wys);
- }
- function Rysuj()
- {
- var rys = [document.getElementById("rys1"), document.getElementById("rys2")];
- var teraz = new Date();
- var minuty = ObliczCzasDoKonca(teraz, nr_kon_lekc);
- RysujWKole(rys[0].getContext("2d"), 0, 0, rys[0].width, rys[0].height, minuty, czas_lekcji);
- RysujWProstokacie(rys[1].getContext("2d"), 0, 0, rys[1].width, rys[1].height, minuty, czas_lekcji);
- }
- MinutyWyraz(12);
- nr_kon_lekc = ZnajdzNrTabKoncaLekcji(new Date());
- setInterval(Rysuj,1000);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
