Guida HTML5: il canvas – parte 1

Come accennato nell’introduzione, uno degli obiettivi dell’HTML5, è facilitare l’implementazione di applicazioni interattive. Una delle più importanti tra queste è canvas: una tela virtuale attraverso la quale potrete liberare l’artista che è in voi!

A differenza degli altri elementi introdotti nell’HTML5, canvas richiede il supporto di JavaScript; ciò lo rende principalmente uno strumento di programmazione che sdogana per la prima volta i limiti imposti nei vecchi documenti web.

Inizieremo disegnando elementari linee per poi arrivare, nel corso delle prossime lezioni, ad applicazioni grafiche più avanzate: animazioni, giochi, grafici dinamici.

Fino a poco tempo fa era impensabile poter creare qualcosa del genere senza l’aiuto di plugin installati nel browser come Flash.

Ma bando alle chiacchiere, iniziamo.

Linee dritte

11_12_01 (1)

Il primo passo è inserire nel body del nostro documento questo semplice tag:

<canvas id="provaCanvas" width="600" height="300"></canvas>

Qui specifichiamo altezza, larghezza e, più importante tra tutti, l’ID che ci servirà come riferimento nel codice JavaScript.

Fate attenzione a non incorrere nell’errore di dichiarare le proprietà width ed height all’interno del foglio CSS anziché nel markup, come specificato nell’esempio appena fatto!

Se provaste in questo momento a visualizzare la vostra pagina html vi trovereste davanti ad un semplice documento bianco.

Dov’è finito il tag che abbiamo appena inserito? Per renderlo visibile basta attribuire nel nostro foglio di stile la seguente regola:

canvas {border: 1px #000 dotted;}

Il terzo step fondamentale consiste nell’utilizzare del codice JavaScript che si agganci all’ID del canvas:

var canvas = document.getElementById("provaCanvas");

e, successivamente, utilizzare il metodo getContext dell’oggetto canvas per specificare il contesto bidimensionale:

var context = canvas.getContext ("2d");

A questo punto sorgerà spontanea la domanda: “se abbiamo specificato 2d, esiste anche un contesto di disegno tridimensionale?”.

Calmi, calmi.

La domanda è complessa ed una risposta esauriente sull’utilizzo di contesti avanzati, come il WebGL, potrà essere data solo alla fine di questo percorso!

Prima di poter proseguire nel disegno occorre, inoltre, capire il sistema di coordinate a cui fanno riferimento i movimenti su canvas. In poche parole il punto iniziale, ovvero la coordinata (0,0) corrisponderà all’angolo superiore sinistro del vostro spazio di lavoro; partendo da quel punto potrete misurare le vostre coordinate in pixel.

Per capire meglio il concetto, fate riferimento a quest’immagine:

 slide2

Finalmente possiamo terminare il compito che c’eravamo prefissi nell’intestazione: disegnare semplici linee dritte. Le azioni da utilizzare sono tre:

  • moveTo – per settare il punto di partenza dal quale disegnare;
  • lineTo – per definire il punto di arrivo al quale arriverà la nostra linea;
  • stroke – per disegnare realmente il segmento precedentemente definito;

Arrivati a questo punto, il nostro codice dovrebbe apparire così:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>prova canvas</title>
<style> canvas {border: 1px #000 dotted;} </style>
<script>
 window.onload = function () {
     var canvas = document.getElementById("provaCanvas");
     var context = canvas.getContext("2d");
     context.moveTo(30, 30);
     context.lineTo(100, 70);
     context.stroke }();
</script>
</head>

<body>
<canvas id="provaCanvas" width="600" height="300"></canvas>
</body>
</html>

Mentre il risultato visivo dovrebbe essere:

slide1

Ovviamente abbiamo la possibilità di personalizzare un po’ le linee che andremo a disegnare.

Ad esempio, possiamo scegliere il colore e la larghezza:

context.lineWidth = 20;
context.strokeStyle = "rgb(6,176,146)";

In questo esempio il colore è stato espresso in RGB ma è possibile utilizzare anche usuali codici HEX; nel nostro esempio #06B092.

Linee curve

11_12_02

Ma nella vita non esistono solo linee dritte, giusto? Allora vediamo come disegnare linee curve attraverso le quattro fondamentali funzioni: arc, arcTo, bezierCurveTo, e quadraticCurveTo.

Il metodo più intuitivo e facile da imparare inizialmente è arc che si occupa di disegnare un arco basato su una porzione di cerchio. Ad esempio:

var canvas = document.getElementById ("provaCanvas");
var context = canvas.getContext ("2d") ;
var centerX = 300;
var centerY = 150;;
var raggio = 100 ;
var inizioAngolo = 1.00 * Math.PI;
var fineAngolo = 2.00 * Math.PI;
context.arc (centerX, centerY, raggio, inizioAngolo, fineAngolo) ;
context.stroke() ;

Analizzando il codice, possiamo capire che:

  • le variabili centerX e centerY determinano il centro del nostro ipotetico cerchio;
  • la variabile raggio imposta il raggio in pixel;
  • le variabili inizioAngolo e fineAngolo impostano l’inizio e la fine dell’arco che vogliamo ottenere;
  • la funzione context.arc utilizza tutte le variabili finora citate per tracciare il nostro arco;

Visivamente avremo:

slide3

Gli altri metodi, arcTo, bezierCurveTo, e quadraticCurveTo (ovvero le cosiddette ‘curve per punti’) possono risultare un po’ più ostici ai meno esperti. L’esempio ideale per iniziare ad approcciare alle curve per punti è, indiscutibilmente, la curva di Bézier.

Per chi non conoscesse la curva di Bézier, presente ormai in qualsiasi programma grafico, può approfondire l’argomento su Wikipedia. Ma vediamo subito come crearne una:

var canvas = document.getElementById("provaCanvas");
var context = canvas.getContext("2d");
context.moveTo(62, 142);
var punto1_x = 87;
var punto1_y = 32;
var punto2_x = 339;
var punto2_y = 480;
var ultimoPuntoX = 376;
var ultimoPuntoY = 29;
context.bezierCurveTo(punto1_x, punto1_y, punto2_x, punto2_y,
ultimoPuntoX, ultimoPuntoY);
context.stroke();

Analizziamo, anche in questo caso, il codice:

  • le variabili punto1x, punto1y contengono le coordinate, in pixel, del primo punto mentre le variabili punto2x, punto2y quelle del secondo;
  • le variabili ultimoPuntoX e ultimoPuntoY contengono, come intuibile, le coordinate del punto finale;
  • la funzione context.bezierCurveTo utilizza le quattro variabili precedentemente descritte per tracciare la linea curva;

Ovviamente tracciare curve di Bézier in canvas può diventare complesso, senza avere riferimenti grafici immediati. Per risolvere questo problema, potete utilizzare questi due ottimi strumenti: link1 e link2.

Conclusione

11_12_03

Ricapitolando, abbiamo appreso come inserire un elemento canvas in un documento HTML e come, attraverso poche righe di JavaScript, disegnare linee dritte e curve. Chi non ha conoscenze di JavaScript può aver trovato difficoltà nel seguire alcune porzioni di codice; in tal caso consiglio di studiare i rudimenti di questo linguaggio prima di approcciare, nuovamente, al canvas.

Nel corso del prossimo articolo vedremo come usare comandi canvas più dettagliati, come: trasparenza, ombre, controllo e trasformazione delle immagini.

Ma, nel frattempo, dopo avervi mostrato alcune delle potenzialità di canvas, pensate che esso sancisca di fatto la fine dell’utilizzo di Flash in ambito web?

Preferite continuare a sviluppare animazioni, grafici e giochi in ActionScript o pensate che canvas e il suo JavaScript possano svolgere bene il loro ruolo?

Inoltre, Flash sarebbe comunque giunto al capolinea, se non ne avesse ostacolato la distribuzione sui propri devices?

E’ possibile scaricare il file .zip di questa lezione a questo link.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici
6) HTML5: Il Canvas – Parte 1
7) HTML5: Il Canvas – Parte 2
8) HTML5: Il Canvas – Parte 3

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • 13-10
    Guida HTML5: il Canvas – Parte 3

    Benvenuto alla terza parte di questa guida dedicata al Canvas. Ora che conosciamo tutti i meccanismi di base che regolano questo strumento, possiamo...

  • html5_social
    HTML5 si può usare per i siti accessibili?

    Premessa: questo articolo è rivolto unicamente a chi avrà a che fare con la Pubblica Amministrazione nei prossimi mesi, speriamo non anni, in cui...

  • 30_06_social
    Guida HTML5: il canvas – parte 2

    Nel corso di questo articolo approfondiremo canvas, le cui basi sono state già discusse in una precedente lezione. Nello specifico, l’ultima volta...

19 commenti

  1. Vilson
  2. Nicolò

Trackback e pingback

  1. Guida HTML5: la prima pagina | Your Inspiration Web
    […] Guida HTML5: il canvas – parte 1 […]
  2. Guida HTML5: nuovi elementi semantici | Your Inspiration Web
    […] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina …
  3. Guida HTML5: introduzione | Your Inspiration Web
    […] HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina …
  4. Guida HTML5: i form – parte 1 | Your Inspiration Web
    […] GUIDA HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) …
  5. Guida HTML5 : i player video | Your Inspiration Web
    […] GUIDA HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  6. Guida HTML5: il canvas – parte 2 | Your Inspiration Web
    […] corso di questo articolo approfondiremo canvas, le cui basi sono state già discusse in una precedente lezione. Nello specifico, …
  7. Guida HTML5: la struttura | Your Inspiration Web
    […] GUIDA HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) …
  8. Guida HTML5: i form – parte 4 | Your Inspiration Web
    […] GUIDA HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  9. Guida HTML5: i tag audio e video (parte1) | Your Inspiration Web
    […] GUIDA HTML5: GLI ARTICOLI 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …

Lascia un Commento

Current day month ye@r *