Utilizzo cookies
L'e-book interattivo I colori Comandi base save() & restore() Stili di linee Rettangoli Archi e Circonferenze clip() Colori gradienti e stili Effetti Ombra Curve di Bezier Testo Trasformazioni Disegnare con Immagini Manipolazione dei Pixel Alpha trasparenza globalCompositeOperation convertire <canvas> Animazioni Grafici 20 Equazioni e spirali

HTML5 canvas in tempo reale


Grafico a barre - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.
var NomiArray = ["Nome0","Nome1","Nome2","Nome3","Nome4"]; // etichette
var ValoriArray = [,,,,]; // valori
var ColoriArray = ["#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#00FFFF"]; // colori
var BaseGrafico = ;
var DistanzaSn = ;
var LargBarra = ;
var DistFraBarre = ;  
ctx.font = "12px Arial"
ctx.beginPath(); // inizio percorso vuota cache
ctx.moveTo(0,BaseGrafico+1); // base del grafico
ctx.lineTo(400,BaseGrafico+1);// convas= 400x330 pixel
ctx.stroke();
for (i = 0; i != 5; i++) { // disegna il grafico
ctx.fillStyle = ColoriArray[i];
ctx.fillRect( DistanzaSn + i * DistFraBarre, BaseGrafico , (DistanzaSn +i)+LargBarra, ValoriArray[i] * ); // barre
ctx.fillText(NomiArray[i],DistanzaSn + i * DistFraBarre, BaseGrafico + 12); // etichette
ctx.fillText(ValoriArray[i],DistanzaSn + i * DistFraBarre, BaseGrafico + 24); // valori






Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.
Antonella Brandi
Art-designer