Javascript e Canvas - Primi passi



I canvas in javascript permettono di disegnare su una pagina web, animare i disegni e creare videogiochi.

Potete cliccare nelle immagini qui a destra per provare alcuni esempi.

Nel codice qui sotto invece potete vedere il codice che costruisce nella pagina un canvas di dimensioni 500x500 e al suo interno, con javascript!, disegna un rettangolo.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue;">
Your browser does not support the HTML5 canvas tag.</canvas> <!--il canvas-->
<script>
    var c=document.getElementById("myCanvas"); // puntatore al canvas
    var ctx=c.getContext("2d"); // puntatore al contest 2d per disegnare
    ctx.rect(20,20,150,100); //Imposta il rettangolo
    ctx.stroke(); // Disegna il rettangolo
</script>
</body>
</html>

Dopo avere analizzato il codice precedente aggiungi al tuo sito web una pagina con:

  1. Il codice precendete che crea la base del canvas.
  2. Segui il tutorial di w3cschool cambia lo sfondo del canvas
  3. Disegna un rettangolo
  4. Disegna un cerchio
  5. Disegna una croce
  6. Disegna un rettangolo con i colori che sfumano da verde a rosso
  7. Del testo con scritto qualcosa che ti piace
  8. Aggiungi un' immagine di dimensione 100x100

Attenzione che le istruzioni seguenti vanno usate una volta sola per prendere il riferimento (puntatore) all'oggetto canvas nella pagina html:

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d"); 

Poi potete usare la variabile ctx per disegnare tutto quello che volete.

Qui potete trovare lo stupendo esempio del prof

Buon lavoro!