Tutorialdock | Free Web Resources

HTML5: canvas – le basi

| di:

HTML5 3D Graphics Effects HTML5: canvas   le basiIniziamo questo tutorial dando uno sguardo alla forma base dell’elemento <canvas>

<canvas id="dimostrazione" width="100" height="100"></canvas>

E’ simile al tag <img> ma non ha gli attributi rel e alt. L’elemento <canvas> ha solo due attributi: width e height, entrambi opzionali. Quando questi due attributi non vengono definiti, il canvas sarà alto 150px e largo 300px.

Naturalmente si può dare dello stile (margin, border, padding, position…) al canvas attraverso CSS e questo non ne modificherà il contenuto.
Voi vi starete chiedendo: “E l’attributo id, come mai c’è anche lui se hai appena detto che il canvas ha solo due attributi?” Ebbene, l’attributo id non è specifico dell’elemento canvas ma è uno degli attributi di default dell’HTML applicabile a quasi tutti i tag.
E’ comunque sempre meglio specificare l’id nel canvas, così da semplificare il lavoro nella fase di scripting.

Compatibilità

Dal momento che <canvas> è un elemento ancora relativamente nuovo e non è implementato in tutti i browser, serve un sistema per ovviare a questa lacuna quando il browser non lo supporta.

Farlo è molto semplice, è sufficiente fornire al browser, del contenuto alternativo da mostrare al posto del <canvas>.
Quando un browser supporta i <canvas> allora ignorerà il contenuto alternativo, in caso contrario mostrerà proprio il contenuto alternativo.

Possiamo per esempio fornire una descrizione del contenuto che si visualizza con il canvas oppure un’immagine che ne rappresenti una sua visualizzazione statica.

<canvas id="mygraph" width="100" height="150">
   Il tuo indice è in ribasso
</canvas>
<canvas id="myimg" width="100" height="150">
   <img src="my_recovery_image.png" title="Immagine statica" />
</canvas>

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente