Canvas figury

0

Witam chwiałbym wypełnić canvasa równymi figurami, ale coś mi nie do końca działa. Jak na razie mam coś takiego


```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 = 'white';
        rysuj.fillRect(0,0,500,500);
        rysuj.fillStyle = 'rgb(10,10,250,0.1)';
            //   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);
        var x=0;
        var y=0;
        for(x =5;x<wysokosc-5;x=x+80)
        {
            for(y =5;y<szerokosc-5;y=y+80)
            {
                
                rysuj.strokeRect(x,y,70,70);
            }
        }
    }
    else
    alert('niedziłczu');
};```

0

Nie określiłeś widt i height swojego obrazka, więc przyjmuje jakieś domyślne wartości.

<canvas width="500" height="500">
0

Mam to zrobione w oddzielnym pliku.
Btw jakoś mi się udało to ogarnąć wczoraj. Tyle że to pół sukcesu. Teraz z tych kropek chciałbym zrobić zegar cyfrowy. Tzn jak mam taki jakby wyświetlacz z kropek żeby z kropek powstawała godzina. Tyle że nie mam zielonego pojęcia jak to zrobić. Tablica, łańcuch czy może jakoś funkcje w funkcjach?

0

Wpadłem na coś takiego. Strasznie prymitywny ten kod zapewne. Chce do każdej cyfry przyporządkować odpowiednią funkcję. Jak na razie mam 7 i 3. Wystarczy. Jak wywołać funkcje tablica, trzy itd w funckji draw()????```

let y=0;
function tablica(){
    for(x=0+10;x<szerokosc-10;x=x+80)
      {
        for(y=0+10;y<wysokosc-10;y=y+80)
        {   
            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(){

}


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);         
              }
            }*/
      
        rysuj.fillStyle = 'lightgreen';
         
        
    }
   
    else
    alert('niedziałczy coś');
};```

Oczywiście canvasa o wymiarach 1500 na 400 mam w index.html

Jest mi ktoś to wyjaśnić / trochę pomóc ?

P.S Ogólnie próbowałem w funkcji draw() wpisać np 'tablica();' no ale to nie wywołuje funkcji tablica. W sumie to nie wiem jak wywołać funkcje w funkcji

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