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.