Canvas

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,
  • Altri linguaggi si sono convertiti all’uso di Canvas per rendere le proprie applicazioni grafiche universali
    • Processing: p5.js, Processingjs
    • Python: vpython
    • VRML: X_ITE X3D Browser

Difetti?

  • Il suo sviluppo si sovrappone a quello dello standard SVG.
  • 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 potenzialità.

Impara

  1. Canvas
  2. Canvas: Contesto grafico
  3. Canvas: Dimensioni
  4. Colori
  5. Colori: Gradiente lineare
  6. Colori: Gradiente radiale
  7. Immagini
  8. Riempimenti
  9. Linee
  10. Linee: Proprietà lineCap
  11. Linee: Proprietà lineJoin
  12. Trasformazioni
  13. Rettangoli
  14. Rettangoli e scale()
  15. Rettangoli e rotate()
  16. Archi
  17. Archi: ellipse()
  18. Archi: arcTo()
  19. Percorsi
  20. Pixel
  21. Testi
  22. Eventi
  23. Suoni
  24. Riepilogo lessico

Applicazioni

  1. Testi: Orario digitale
  2. Testi: Orario e data
  3. Cerchi concentrici
  4. UNISCI I PUNTI – Poligoni regolari (e stellati)
  5. UNISCI I PUNTI – Poligoni regolari – Diagonali
  6. STRING ART – Poligoni regolari (e stellati)
  7. STRING ART – Asteroidi
  8. STRING ART – Cerchio

Risorse essenziali

In italiano

In inglese