Canvas è un nuovo elemento di HTML5 che può essere utilizzato all’interno di una pagina web per
- scrivere testi, visualizzare immagini, disegnare grafici, rispondere agli eventi, riprodurre suoni
- realizzare applicazioni complesse all’interno di una pagina web: testi+immagini+suoni+interattività=giochi!
Perché si è affermato?
- Utilizza Javascript come linguaggio di scripting
- Lo standard è implementato in tutti i browser aggiornati
- È indipendente dalla piattaforma
- Rende superflui i plug-in proprietari: Flash, Java Applet, Shockwave, SilverLight, …
- Molti linguaggi/software di successo sono stati portati in Canvas per renderli universali: Processing (p5.js), Python (Glowscript), Scratch, Scriptographer (Paper.js), Sketchup, Small Basic, Tinkercad, VRML (X_ITE X3D Browser), …
Difetti?
- La sua sintassi può risultare complessa: per questo sono disponibili molte librerie (kinetic.js, Easel.js, Fabric.js, Zebra) che semplificano le operazioni più frequenti e aumentano le sue potenzialità.
Impara
- Canvas
- Canvas: Contesto grafico
- Canvas: Dimensioni
- Colori
- Colori: Gradiente lineare
- Colori: Gradiente radiale
- Immagini
- Riempimenti
- Linee
- Linee: Proprietà lineCap
- Linee: Proprietà lineJoin
- Trasformazioni
- Rettangoli
- Rettangoli e scale()
- Rettangoli e rotate()
- Archi
- Archi: ellipse()
- Archi: arcTo()
- Percorsi
- Pixel
- …
- Testi
- Eventi
- Suoni
- Riepilogo lessico
Risorse essenziali
In italiano
- HTML.IT > Canvas, guida pratica / Canvas, una tela trasparente
- Imparate a creare grafica Web con canvas in un’ora!
- PDF: APPRENDIMENTO HTML5-CANVAS
In inglese
- W3C: 2Dcontest
- MDN > Canvas / Drawing graphics
- Wikipedia: Canvas
- w3school > Canvas Reference / Canvas Tutorial / Canvas Clock
- Html5 Canvas Tutorials | Eloquent Javascript: Drawing on Canvas | HTML Canvas Deep Dive – github: canvasdeepdive-book | HTML Canvas API Tutorial | w3resource > HTML5 Canvas Tutorial | Canvas Tutorial (Breakout)
- Experiments with Google: Chrome Experiments