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


Panorama - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.

var Avanzamento = ; // velocità di movimento immagine
var x = 0;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image(); // nuova immagine

function draw() {
x = x + Avanzamento; // spostamento x = 96

context.drawImage(imageObj, x, 0);
context.drawImage(imageObj, x - 400, 0);
imageObj.src = ''; // carica immagine

if (x > 400){Avanzamento = Avanzamento * -1;} // se ragginto limite inverte percorso
if (-1 > x){Avanzamento = Avanzamento * -1;} // se ragginto limite inverte percorso
};
window.setInterval('draw()', 60); // motore del movimento con timer


Le immagini sono di 800x300 pixel


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