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


Spirale di Archimede - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.  
var i; var Step; var Max; var Min; var ColoreA; var ColoreB; // var p;

function disegna() { 
i = i + Step;
r = 15 * i; Max = 11; ColoreA = 'red'; ColoreB = 'green'; // Archimede
ctx.beginPath();
ctx.moveTo(200, 150); // centro canvas
var x = 200 + r * Math.sin(i); var y = 150 + r * Math.cos(i); // calcola posizione x,y
ctx.font = "38px Arial"; // tipo e dimensione font
ctx.fillText('.', x, y);
ctx.fillStyle = ColoreA; // tipo colore
ctx.lineTo(x, y); // disegna linea
ctx.strokeStyle = ColoreB; 
// tipo colore
ctx.stroke();
if (i > Max) { clearInterval(MiaVar); }// raggiunto fine   
}
$('.curva').click(function(){
var AvviaCurva = $(this).html(); //alert(AvviaCurva);
if(AvviaCurva == "Start")ctx.clearRect(0, 0, 400, 300);
i = 0; Step =; // valore avanzamento
MiaVar=window.setInterval(function(){disegna()},);// tempo
}
if(AvviaCurva == "Stop"){clearInterval(MiaVar);}


https://it.wikipedia.org/wiki/Spirale_archimedea





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