Zegar cyfrowy z kropek w js

0

Witam mam za zadanie zrobić zegar cyfrowy z kropek w canvasie.
Nie umiem, animować poszczególnych cyfr. a cyfry mają być wywoływane z poszczególnych funkcji. Na internecie nic konkretnego nie sety nie znalazłem
Doszedłem do czegoś takiego:

let x=0;
let y=0;
let i=0;
function draw(){
    let canvas= document.getElementById('canvas');
    if(canvas.getContext)
    {
        //width=500px height=500px
        let wysokosc=canvas.height;
        let szerokosc=canvas.width;
    
        let rysuj = canvas.getContext('2d');
        rysuj.fillStyle = 'black';
        rysuj.fillRect(0,0,1500,420);
        rysuj.fillStyle = 'darkgreen';
            //   rysuj.fillRect(100,100,100,100);
            //  rysuj.fillRect(25,25,100,100);
            // rysuj.clearRect(45,45,60,60);
            // rysuj.strokeRect(50,50,50,50);
            //   rysuj.strokeRect(55,55,40,40);
        
      /*
            for(x=0+10;x<szerokosc-10;x=x+80)
            {
              for(y=0+10;y<wysokosc-10;y=y+80)      wyswietlanie ,tablicy'
              {   
                  rysuj.fillRect(x,y,40,40);         
              }
            }*/
            function tablica(){var grd = rysuj.createLinearGradient(0, 500, 0, 0);
                grd.addColorStop(0, "darkgreen");
                grd.addColorStop(1, "lightgreen");
                for(x=0+10;x<szerokosc-10;x=x+80)
                  {
                    for(y=0+10;y<wysokosc-10;y=y+80)
                    {   
                        rysuj.fillStyle = grd;
                        rysuj.fillRect(x,y,40,40);         
                    }
                  }
            }
            function trzy(){
              
                rysuj.fillRect(10,10,40,40);
                rysuj.fillRect(90,10,40,40);
                rysuj.fillRect(170,10,40,40);
                rysuj.fillRect(170,90,40,40);
                rysuj.fillRect(170,170,40,40);
                rysuj.fillRect(170,250,40,40);
                rysuj.fillRect(90,330,40,40);
                rysuj.fillRect(170,330,40,40);
                rysuj.fillRect(10,330,40,40);
                rysuj.fillRect(10,170,40,40);
                rysuj.fillRect(90,170,40,40);
            
            }
            function siedem(){
                rysuj.fillRect(10,10,40,40);
                rysuj.fillRect(90,10,40,40);
                rysuj.fillRect(170,10,40,40);
                rysuj.fillRect(170,90,40,40);
                rysuj.fillRect(170,170,40,40);
                rysuj.fillRect(170,250,40,40);
                rysuj.fillRect(170,330,40,40);
            
            }
            function jeden(){
            
            }
            tablica();
            rysuj.fillStyle = 'lightyellow';
           


           
            }  else
    alert('niedziałczy coś');
};

Oczywiście mam udzielny plik index.html gdzie mam canvasa. Dziękuje za wszelką pomoc.

4

Po pierwsze, jak coś chcesz zmienić na canvas, to musisz odmalować cały płótno od początku. Nie możesz zmienić poszczególnych elementów. Trudność tego zadania polega w sposobie tworzenia tych liczb. Urządzenia, które wyświetlają liczby w ten sposób nazywają się Seven-segment display.

Każda liczba składa się z 7 możliwych segmentów (stąd nazwa):
title

W artukule na wikipedii, na samym dole znajdziesz tabelkę z konfiguracją. Dla każdej liczby jest napisane, które segmenty są podświetlone. W naszym kodzie można to zamodelować w ten sposób:

const segmentsConfiguration = [
  {a: true,	b: true,	c: true,	d: true,	e: true,	f: true,	g: false},
  {a: false,	b: true,	c: true,	d: false,	e: false,	f: false,	g: false},
  {a: true,	b: true,	c: false,	d: true,	e: true,	f: false,	g: true},
  {a: true,	b: true,	c: true,	d: true,	e: false,	f: false,	g: true},
  {a: false,	b: true,	c: true,	d: false,	e: false,	f: true,	g: true},
  {a: true,	b: false,	c: true,	d: true,	e: false,	f: true,	g: true},
  {a: true,	b: false,	c: true,	d: true,	e: true,	f: true,	g: true},
  {a: true,	b: true,	c: true,	d: false,	e: false,	f: false,	g: false},
  {a: true,	b: true,	c: true,	d: true,	e: true,	f: true,	g: true},
  {a: true,	b: true,	c: true,	d: true,	e: false,	f: true,	g: true},
];

Indeksy w tej tablicy odpowiadają poszczególnym liczbom. segmentsConfiguration[0], to 0, segmentsConfiguration[1] to konfiguracja dla liczby 1 itd. a: true oznacza, że musimy narysować "a" z pierwszego obrazka. g: false oznacza, że ten segment nie jest podświetlony, więc go nie rysujemy. W celu wypisania godziny pobierzemy dla niej konfigurację i wypiszemy używając ctx.moveTo() i ctx.lineTo.

Do wywołania tych metod potrzebujemy współrzędnych. moveTo przesuwa kursor (np. na pozycję 0; 0), a lineTo zaczyna malować (np. od 0;0 do 50; 0, czyli tworzy horyzontalną linię). Musimy więc stworzyć konfigurację, która będzie miała te informacje, jak namalować każdy segment. Dla każdego segmentu gdzie zacząć i gdzie skończyć rysować:

const segments = {
  a: {
    x1: 0, y1: 0,
    x2: segmentLength, y2: 0,
  },

  b: {
    x1: segmentLength, y1: 0,
    x2: segmentLength, y2: segmentLength,
  },

  c: {
    x1: segmentLength, y1: segmentLength,
    x2: segmentLength, y2: segmentLength * 2,
  },

  d: {
    x1: 0, y1: segmentLength * 2,
    x2: segmentLength, y2: segmentLength * 2,
  },

  e: {
    x1: 0, y1: segmentLength,
    x2: 0, y2: segmentLength * 2,
  },

  f: {
    x1: 0, y1: 0,
    x2: 0, y2: segmentLength,
  },

  g: {
    x1: 0, y1: segmentLength,
    x2: segmentLength, y2: segmentLength,
  },
};

Tutaj masz cały kod: http://jsfiddle.net/rgwe23db/2/. Na ten moment wyświetla na sztywno wpisaną godzinę, bez kropek oddzielających godziny i minuty, ale mam nadzieję, że po kilku próbach dostosujesz to do swoich potrzeb :) W zasadzie wystarczy to uruchomić w jakimś setInterval a tablicę const hourDigits = [0, 0, 1, 3]; tworzyć z bieżącej godziny i minuty. Powodzenia!

0

Co rozumiesz przez "zegar z kropek"?

Nie wiem, czy to spełni warunki zadania, bo może masz się wykazać właśnie ręcznym rysowaniem tych kropek od zera, ale najprostsze rozwiązanie to:

  • dobrać czcionkę odpowiadającą twoim oczekiwaniom,
  • wklepać zegar w canvas jako tekst,
  • zeskanować piksele i przekopiować w powiększeniu (ew. z jakimiś dodatkowymi odstępami).

Jeszcze w czasach starego, dobrego Basica tak się bawiłam.

0

https://codepen.io/Loraxor/pen/orvdMy tu mam link do codepena. Mam tam takie guziki które jak na razie zapalają cyfry od 1-3 oraz 7. O takie kropki mi chodziło. Coś jak taki właśnie 7 segmentowy wyświetlacz. Tyle że segment to nie kreska a kropka.

W sumie nie mam problemu z rysowaniem tych kropek-światełek-segmentów.... problem ma żeby np sobie z tego zrobić prosty licznik...eh...kończy się na tym że jedyne co mi się udało to w sumie nic....

0

Btw...pytanie ludzi co byli/są na studiach. Tylko u mnie tak jest że np w tym przypadku, prowadzący uczy/pokazuje jak w canvasie rysować kwadraty i trójkąty a później wymaga na kolosach takich rysunków?
Ja wiem jak działają studia, praca własna itp itd, ale niektórych rzeczy nie sposób znaleźć w internecie lub książkach.

2

prowadzący uczy/pokazuje jak w canvasie rysować kwadraty i trójkąty a później wymaga na kolosach takich rysunków

No ale na tym to polega - on pokazuje jak działają poszczególne elementy, a Ty masz to zrozumieć, a potem pomyśleć, jak z tych małych klocków stworzyć coś większego. To tak samo jak z aplikacją desktopową - w sumie to składa się głównie z prostych elementów - przycisków, list, ikonek i to nie one same decydują o tym, że aplikacja jest przydatna, ale sposób, w jaki są one oprogramowane, istotne jest miejsce, w którym programista je umieścił, a także to, jakie za jakie funkcje odpowiadają.
Wracając to Twojego pytania - skoro rozumiesz, jak działa rysowanie pojedynczego kwadracika, to zastanów się, jak można z kilku kwadratów zrobić coś bardziej skomplikowanego. Tak z grubsza to na tym właśnie polega programowanie - nie piszesz wszystkiego od zera, ale korzystasz z gotowych rozwiązań, składasz z klocków i kombinujesz sobie w miarę umiejętności ;)

2

Coś jak taki właśnie 7 segmentowy wyświetlacz. Tyle że segment to nie kreska a kropka.

No to przerób to, co Ci dałem na kropki i tyle. Logika ta sama, zmienia się w zasadzie tylko metoda rysująca, czyli tam gdzie masz moveTo i lineTo.

Wystarczy, że odpowiesz sobie na jedno zajebiście, ale to zajebiście, ważne pytanie: jak z prostokąta zrobić dwie kropki? Logika tego jakie segmenty trzeba namalować już jest zrobiona za Ciebie. Zmień tylko sposób malowania. Wszystkie dane już masz dostarczone do tej metody, czyli x1, x2 i y1 i y2.

Ja wiem jak działają studia, praca własna itp itd, ale niektórych rzeczy nie sposób znaleźć w internecie lub książkach.

O to właśnie chodzi. Programowanie, to nie historia, czy medycyna, że otworzysz sobie książkę i wszystko wyczytasz. On Wam pokazał jak używać narzędzi, a Wy metodą prób i błędów musicie coś zbudować.

0

Rozumiem, przepraszam trochę źle sformułowałem pytanie. Te kropki to w sumie te kwadraty które już mam. Potrafię 'zapalić' poszczególne lampki (kwadraciki).
Nie umiem zrobić tego ...hmm... Ogólnie chciałem to zrobić tak, porobić funkcje od każdej cyferki(to umiem). Później w np for wprowadzić licznik np do 60 (sekundy) i co licznik zmianiać wyświetlaną cyfre(funkcje)
jakby...nie umiem tego zrobić dynamicznie, bez odświeżania strony, próbowałem już na kilka sposobów w sumie... Nie umiem jakby zamknąć tego w pętli/funkcji żeby na tym canvasie 'wyświetlały' się kolejne klatki, jakby animacja

0

To tak w dużym uproszczeniu - skoro masz funkcje rysującą tabelkę, umiesz także namalować konkretną cyfrę, to wyświetlanie różnych wartości sprowadza się do wyświetlenia danej wartości, potem wyczyszczenia (czyli namalowania pustej tabeli), a na koniec wyświetlenie nowej liczby. I tak w kolko ;)

0

Próbowałem robić to w pętli for, ale nie działa. Wyczyścić tabele próbowałem zrobić tak że rysowałem ją na nowo bez cyfr, ale to bugowało inne funkcje i przestawało działać. W js są jakieś inne polecenie/funkcje/zmienne do takich rzeczy???
btw, dalej nie wiem jak odświeżać canvasa za akazdym razem ;/

1
Loraxor napisał(a):

W js są jakieś inne polecenie/funkcje/zmienne do takich rzeczy???

setInterval

1 użytkowników online, w tym zalogowanych: 0, gości: 1