JavaScript canvas

In questo breve articolo parleremo dei JavaScript canvas, cioè uno strumento utile per tracciare linee, disegni, immagini e figure geometriche all’interno di una pagina web.

Quindi facciamo una precisazione: canvas è un tag introdotto con HTML5 e può essere utilizzato per disegnare, quanto detto sopra, utilizzando un linguaggio di script.


Esempio 1 di utilizzo di JavaScript Canvas

Facciamo quindi un esempio di utilizzo dei canvas con JavaScript.

Disegneremo un arco di circonferenza al clic del pulsante crea arco.

Spiacente non supporto i canvas di HTML5

Per creare questo esempio innanzitutto creo il mio pulsante, che richiama la funzione creaF() al verificarsi dell’evento onclick().

<button onclick="creaF()" type="button">Crea arco</button>

Dopo creo l’area dove comparirà il disegno, aggiungendo un messaggio di avviso per i browser che non supportano i canvas.

<canvas id="disegno" width="400" height="100">
Spiacente non supporto i canvas di HTML5 </canvas>

Poi realizzo il codice per creare il semicerchio.

Dapprima rendiamo disponibile l’oggetto disegno in JavaScript e lo facciamo in questo modo:

var disegno=document.getElementById('disegno');
var context=disegno.getContext('2d');

In definitiva sto specificando il contesto 2d ovvero a due dimensioni, escludendo cioé la coordinata Z della terza dimensione.

Imposto anche lo spessore della linea utilizzando il metodo lineWidth che di default setta lo spessore a 1.

context.lineWidth=5;

Poi devo disegnare un arco di circonferenza che va da 0° a 180°, cioè appunto una semicirconferenza e per farlo utilizzo il metodo arc() e specifico alcuni valori:

Innanzitutto le coordinate dove creare la semicirconferenza (100,100);

Quindi il raggio (50);

A seguire l’angolo di partenza uguale a 0° e l’angolo di arrivo uguale a 180° e per rappresentarlo utilizzo la funzione predefinita Math.PI.

Infine il senso antiorario utilizzando true.

context.arc(100,100,50,0,Math.PI,true);

Poi con il metodo stroke() disegno la linea e utilizzando anche strokeStyle() dò un colore alla linea, che di default è nera.

context.strokeStyle="rgb(0,0,255)";
context.stroke();

N.B Per i CSS3 dovrei utilizzare la notazione RGBa, dove nell’ultimo parametro si specifica il valore alpha, cioè la trasparenza.

Poi penso al riempimento, ma potrei anche non metterlo:

context.fillStyle="rgba(255,255,0,1)";
context.fill();

Allego quindi lo script dell’esempio su javascript canvas completo:


<script type="text/javascript">
function creaF(){
   var disegno=document.getElementById('disegno');
   var context=disegno.getContext('2d');
   context.arc(100,100,50,0,Math.PI,true);
   context.lineWidth=5;
   context.strokeStyle="rgba(0,0,255,1)";
   context.stroke();
   context.fillStyle="rgba(255,255,0,1)";
   context.fill();
}
</script>
<button onclick="creaF()" type="button">Crea arco</button>
<canvas id="disegno" width="400" height="100">
Spiacente non supporto i canvas di HTML5 </canvas>

Chiaramente questo è solo un semplicissimo esempio di utilizzo dei javascript canvas.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *