venerdì 18 Settembre 2020

Download in corso

Softwareone.it

11-01-2019

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.

Pubblicità

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>
Elemento

è 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).

Pubblicità
<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);
Il tuo browser non supporta il tag canvas HTML5.

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.

I commenti sono chiusi.

Pubblicità