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, …
  • 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à.

Sintassi

Riepilogo lessico
Canvas
Canvas
Contesto grafico
Dimensioni
Colori
Colori
Gradiente lineare
Gradiente radiale
Linee
Linee
Proprietà lineCap
Proprietà lineJoin
Rettangoli
Rettangoli
Rettangoli e scale()
Rettangoli e rotate()
Archi
Archi
ellipse()
arcTo()

Immagini | Riempimenti | Trasformazioni | Percorsi | Pixel | Testi | Eventi | Suoni

Applicazioni

OROLOGI
Orario digitale (testo)
Orario e data (testo)
GEOMETRIE
Cerchi concentrici
Poligoni regolari e stellati
Poligoni regolari – Le diagonali
STRING ART
Poligoni regolari e stellati
Asteroidi
Cerchio

Risorse essenziali

In italiano

In inglese