Canvas con JavaScript

In questo articolo parleremo ancora dei canvas con JavaScript.

Faremo un esempio molto semplice graficamente. Più avanti infatti vedremo come implementare i grafici utilizzando la libreria Chart.js, oggi vi indico per il momento solo il link alla libreria: chartjs.org.

Ipotizziamo quindi di prendere dei dati dalle caselle di input e realizzare un grafico a torta utilizzando proprio questi dati.

Inserite dunque i dati nelle caselle di input e dopo cliccate sul pulsante crea. Subito sotto vedrete il grafico a torta che si è generato.

Ecco come dovrebbe risultare l’esempio di utilizzo dei canvas con javascript:

Spiacente non supporto i canvas di HTML5

Procedimento – uso di canvas con javascript per creare grafici

Innanzitutto inseriamo le caselle di input di tipo number, specificando l’id e aggiungiamo il button dove all’evento onclick() richiamiamo la funzione creaGrafico().

<input type="number" id="dato1">
<input type="number" id="dato2">
<input type="number" id="dato3">
<input type="number" id="dato4">
<button onclick="creaGrafico()" type ="button">crea</button>

Dopo inseriamo l’area dove generare il nostro grafico:

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

Infine creiamo la nostra funzione JavaScript.

Per crearla iniziamo a rendere disponibile l’oggetto come nell’esempio precedente:

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

Poi leggiamo i dati dalla casella di testo, utilizzando il metodo getElementById() come abbiamo spiegato negli articoli precedenti.

Adesso dobbiamo calcolare le ampiezze degli angoli dal valore immesso in input. Utilizziamo questa semplice proporzione:

angolo=valore * 2 PiGreco/totale.

Quindi calcoliamo il totale dei valori immessi in input e dopo ricaviamo gli angoli.

Infine iniziamo a creare le nostre porzioni di torta utilizzando il metodo beginPath() e closePath() per ogni porzione.

Allego lo script completo che utilizza i canvas con javascript per creare grafici a torta.

<script type="text/javascript">
function creaGrafico(){
   var disegno=document.getElementById('disegno');
   var context=disegno.getContext('2d');
   var input1=eval(document.getElementById('dato1').value);
   var input2=eval(document.getElementById('dato2').value);
   var input3=eval(document.getElementById('dato3').value);
   var input4=eval(document.getElementById('dato4').value);
   
   var total=input1+input2+input3+input4;

   var angle1=2*Math.PI*input1/total;
   var angle2=2*Math.PI*input2/total;
   var angle3=2*Math.PI*input3/total;
   var angle4=2*Math.PI*input4/total;
   
   context.beginPath();
      context.arc(100,100,50,0,angle1, false);
      context.lineWidth=2;
      context.lineTo(100,100);  
      context.fillStyle="rgba(255,255,0,1)";
      context.fill();
   context.closePath();

   context.beginPath();
      context.arc(100,100,50,angle1,angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100);
      context.fillStyle="rgba(0,240,255,1)";
      context.fill();
   context.closePath();
   
   
   context.beginPath();
      context.arc(100,100,50,angle2+angle1,angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(255,0,255,1)";
      context.fill();
   context.closePath(); 
  
   context.beginPath();
     context.arc(100,100,50,angle3+angle2+angle1,angle4+angle3+angle2+angle1,false);
      context.lineWidth=2;
      context.lineTo(100,100); 
      context.fillStyle="rgba(200,155,255,1)";
      context.fill();
   context.closePath();
}
</script>

In maniera simile si potrebbero ad esempio creare degli istogrammi, mi servirà in questo caso ad esempio il metodo fillRect().

Chiaramente questi sono solo dei semplici esempi di come realizzare grafici utilizzando i canvas con JavaScript.

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 *