Cerchi concentrici – Programmare con Javascript

Dieci cerchi concentrici

Dieci cerchi concentrici, ripetuti due volte

Dieci cerchi concentrici, ripetuti quattro volte

const QUANTI=10;

var cs;

var w,h;

var w2,h2;

var raggio0;

var delta;

prepara("canvas1",0.46); cerchi(w2 , h2 );

prepara("canvas2",0.23); cerchi(w2-raggio0, h2 );

cerchi(w2+raggio0, h2 );

prepara("canvas3",0.23); cerchi(w2 , h2-raggio0);

cerchi(w2 , h2+raggio0);

prepara("canvas4",0.23); cerchi(w2-raggio0, h2 );

cerchi(w2+raggio0, h2 );

cerchi(w2 , h2-raggio0);

cerchi(w2 , h2+raggio0);

function prepara(nome,dim)

{

cs=document.getElementById(nome);

w=cs.width;

h=cs.height;

w2=w/2;

h2=h/2;

raggio0=dim*h;

delta=raggio0/QUANTI;

g2d=cs.getContext("2d");

g2d.fillStyle="#99330010";

}

function cerchi(x,y)

{

g2d.setTransform(1,0,0,1,0,0);

g2d.translate(x,y);

raggio=raggio0;

for(i=1; i <= QUANTI; i++)

{

g2d.beginPath();

g2d.arc(0,0, raggio, 0,2*Math.PI);

g2d.fill();

raggio -= delta;

}

</script>