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


Quando usare <canvas>

Diversi sono i motivi che spingono a voler utilizzare le funzioni canvas di HTML5 con le sue molteplici possibilità.

  • Interattività: essendo <canvas> interattivo, cioè rispondere alle azioni dell'utente.
    Questo avviene attraverso l'ascolto per gli eventi da tastiera, mouse ecc.
    Non è quindi limitato alle immagine statiche.
  • Animazione: Ogni oggetto disegnato su <canvas> può essere animato. 
  • Flessibilità: Non ci sono praticamente limiti alle forme utilizzabili, linee, testo, immagini, ecc
    Oltre a queste anche audio e video.
  • Multipiattaforme di supporto: <canvas> è supportato da tutti i principali browser (autunno 2016) e può essere fruito su dispositivi tipo tablet e smartphone  iPhone, iPad oltre che naturalmente, desktop.
  • Opensource: Cioè tecnologia aperta e di libero utilizzo.

L'elemento HTML5 <canvas>, per le sue qualità,  si sta rendendo indispensabile, rendendo obsolete tecnologie proprietarie in auge negli anni passati.

Il tag <canvas> è affine ad altri come ad esempio  <div> , <table> ecc. e viene di norma definito utilizzando gli attributi width (larghezza) e height (altezza).

Due importanti differenze contraddistinguono questo tag da tutti gli altri.

  1. Il suo contenuto può essere elaborato con JavaScript. 
  2. Suffisso px che normalmente indica la quantità di pixel delle dimensioni, non è tecnicamente consentito dalle <canvas> ma viene assunto di default. 
    Secondo le specifiche, i valori per questi attributi, possono essere solo numeri interi positivi.
    La loro dichiarazione è simile a quella dei CSS in linea, ad esempio:
    <canvas id="Canvas" width="800" height="600"></canvas>
    Notare che i valori 800 e 600 non sono seguiti da nessuna unità di misura, il sitema assume che siano pixel.

Il tag <canvas> è normalmente inserito fra i tag <body> .....<body> e posizionato in un qualsiasi punto della pagina sia ritenuto opportuno.
Per accedere al tag <canvas> con JavaScript, occorre creare un contesto (2d o 3d), e quindi utilizzare i comandi messi a disposizione per le elaborazioni.
Come gli altri tag l'elemento <canvas> è un nodo DOM incorporato nella pagina HTML, mentre il contesto 2D o WebGL (3d)  è un oggetto con proprietà e metodi utilizzabili per il rendering della grafica all'interno dell'elemento <canvas>. 
Ogni elemento <canvas> può avere un solo contesto, usando il metodo getContext () più volte, verrà restituito sempre un riferimento allo stesso oggetto.

In questa guida verrà sempre utilizzato il codice

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

che sarà sempre sottinteso.
Se usato con dimensioni diverse sarà specificato di volta in volta.







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