30 Javasript: La prima animazione.

 

<canvas id="tela" width="800" height="600"> </canvas>

 

<script>

// attiviamo la grafica

canvas = document.getElementById("tela");

g = canvas.getContext("2d");

g.transform(1,0,0,-1,0,600);

 

// dimensioni canvas

larghezza = 800;

altezza = 600;

 

// posizione della figura

posx = 10; // posizione X

posy = 10; // posizione Y

lato = 5; // misura del lato

// velocità della figura

vx = 10; // velocità X

vy = 12; // velocità Y

 

function quadrato(x,y, lato) {

// usare la funzione già creata in passato

}

 

function aggiornaPosizione() {

// aggiorna la posizione X usando la velocità X

posx += vx;

// se si esce dallo schermo invertire la velocità

if(posx>larghezza) {vx = -vx;}

if(posx<0) { vx = -vx; }

// aggiorna la posizione Y usando la velocità Y

posy += vy;

// se si esce dallo schermo invertire la velocità

if(posy>altezza) {vy = -vy;}

if(posy<0) {vy = -vy;} 

}

 

function animazione() {

// cancella schermo

g.fillStyle = "black";

g.fillRect(0,0,larghezza,altezza);

// aggiorna posizione figura

aggiornaPosizione();

// disegna quadrato

g.strokeStyle = "white";

quadrato(posx, posy, lato);

 

// esegui ancora la funzione “animazione”

requestAnimationFrame(animazione);

}

 

// chiamata della funzione “animazione” per far partire il programma.

animazione();

 

</script>