Il tag canvas

Il tag canvas è uno degli elementi introdotti nelle specifiche HTML5. Viene utilizzato per disegnare grafici, al volo, tramite scripting (di solito JavaScript), è necessario utilizzare uno script per disegnare effettivamente la grafica.

Suggerimento: Per un riferimento completo di tutte le proprietà ei metodi che possono essere utilizzati con l’oggetto canvas, Riferimento canvas W3C .

*Browser versioni superiore 9+

Canvas è un semplice contenitore e, come tale, dispone di un tag di apertura <canvas> ed uno di chiusura </canvas>: Se non vengono indicate le dimensioni tramite gli attributi width ed height la dimensione assegnata al contenitore è quella di default, un rettangolo con base 300 e altezza 150.

<canvas id="esempio" width="196" height="96" style="border:solid 1px #ccc;" > Elemento </canvas>

è necessario utilizzare uno script per disegnare effettivamente la grafica.

<canvas id="bandierina" width='180' height='100'></canvas>
<script type="text/javascript">
var canvas=document.getElementById('bandierina');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,180,100);
ctx.fillStyle='#FFFFFF';
ctx.fillRect(0,0,120,100);
ctx.fillStyle='#00FF00';
ctx.fillRect(0,0,60,100);
</script>

Trasparenza proprietà globalAlpha

La proprietà globalAlpha imposta o restituisce il valore corrente o alfa trasparenza del disegno. Il valore della proprietà globalAlpha deve essere un numero compreso tra 0.0 (completamente trasparente) e 1.0 (senza trasparenza).

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5. </canvas>

var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="red";
      ctx.fillRect(20,20,75,50);
      
//Turn transparency on
      ctx.globalAlpha=0.2;
      ctx.fillStyle="blue"; 
      ctx.fillRect(50,50,75,50); 
      ctx.fillStyle="green"; 
      ctx.fillRect(80,80,75,50);

canvas rotate () Metodo

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5. </canvas>

<script>
    var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.rotate(20*Math.PI/180);
      ctx.fillRect(50,20,100,50);
    </script>

Le Animazioni

Le animazioni, di fatto, si realizzano mediante l’esecuzione di porzioni di codice javascript ad intervalli di tempo regolari. Questa tecnica permette di visualizzare immagini che cambiano le loro caratteristiche in base all’algoritmo incluso nella funzione.