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:
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!