Canvas (elemento HTML): differenze tra le versioni

Versione delle 18:14, 21 feb 2021

Versione attuale delle 13:05, 3 feb 2025

(6 versioni intermedie di 6 utenti non mostrate)

Riga 4:

L'elemento fu inizialmente introdotto da [[Apple]] per uso all'interno del loro componente [[macOS]] [[WebKit]], per migliorare applicazioni come [[Dashboard]] widgets ed il browser [[Safari (browser)|Safari]].

Più tardi venne adottato dai browser [[Gecko]] ([[Mozilla Application Suite|Mozilla]] e [[Mozilla Firefox|Firefox]]) e [[Opera (browser)|Opera]]<ref>{{Cita web |url=https://www.opera.com/docs/changelogs/windows/900/ |titolo=Opera 9.0 changelog |accesso=30 aprile 2019 |urlarchivio=https://web.archive.org/web/20170826191905/http://www.opera.com/docs/changelogs/windows/900/ |dataarchivio=26 agosto 2017 |urlmorto=sì }}</ref>, e poi standardizzato dal [[Web Hypertext Application Technology Working Group|WHATWG]] su nuove specifiche proposte per le tecnologie della prossima generazione.

[[Novell]] produce un [[XForms]] processor plugin per [[Internet Explorer]] (dal 2020 obsoleto in favore di [[Microsoft Edge|Edge]]), che supporta l'elemento canvas.<ref>[http://lab.cph.novell.com/nxie/ Novell XForms Explorer] {{webarchive|url=https://web.archive.org/web/20051220203235/http://lab.cph.novell.com/nxie/ |data=20 dicembre 2005 }}</ref> Sviluppi indipendenti per supportare il canvas su Internet Explorer non richiedono plugins e sono basati esclusivamente su [[Vector Markup Language|VML]] e [[JavaScript]].<ref>[http://me.eae.net/archive/2005/12/29/canvas-in-ie/ Canvas in IE]</ref> Anche Google ha avviato un progetto per aggiungere le capacità del canvas ad Internet Explorer usando la stessa tecnica.<ref>[http://excanvas.sourceforge.net/ Google's Canvas in IE project]</ref>

Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi ''height'' and ''width''. Il codice [[JavaScript]] può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.

== Sintassi ==

Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi ''height'' and ''width''. Il codice [[JavaScript]] può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.

Il codice seguente crea un elemento Canvas in una pagina HTML:

<syntaxhighlight lang="html">

Riga 16:

Utilizzando JavaScript è possibile aggiungere dei disegni; ad esempio, questo codice disegna un rettangolo rosso sullo schermo:

<syntaxhighlight lang="javascripjavascript">

var example = document.getElementById('example');

var context = example.getContext('2d');

Riga 63:

In SVG, ogni forma disegnata viene "ricordata" come un oggetto. Se gli attributi di un oggetto SVG vengono modificati, il browser può automaticamente rieseguire il rendering della forma.

Il Canvas (anch'esso un elemento HTML5) viene renderizzato pixel per pixel. Il Canvas, una volta disegnata la grafica, viene "dimenticato" dal browser. Se la sua posizione deve essere cambiata, l'intera scena deve essere ridisegnata, inclusi gli oggetti che potrebbero essere stati coperti dalla grafica<ref>{{Cita web|url=https://www.w3schools.com/html/html5_svg.asp|titolo=HTML SVG|sito=www.w3schools.com|accesso=2021-01-19}}</ref>.

Il Canvas è adatto per applicazioni dinamiche come giochi e animazioni, per via del suo caricamento più veloce e indipendente dal DOM.

Le immagini create in SVG sono aggiunte al [[Document Object Model|DOM]] e modificabili tramite [[JavaScripttJavaScript]] e [[CSS]], anche con eventi presenti sugli altri elementi del documento<ref>{{Cita web|url=https://www.wellnet.it/blog/recensioni/svg-o-canvas-il-tuo-html5|titolo=SVG o Canvas per il tuo HTML5?|sito=Wellnet|data=2014-05-09|lingua=it-IT|accesso=2021-01-19}}</ref>.

{| class="wikitable"

|'''Funzioni'''<ref>{{Cita web|url=https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/|titolo=When to Use SVG vs. When to Use Canvas|sito=CSS-Tricks|data=2019-11-12|lingua=en|accesso=2021-01-29}}</ref>

Riga 125:

Al momento della sua introduzione, l'elemento ''canvas'' non fu accolto unanimemente dalla comunità che si occupa di definire gli standard del [[World Wide Web|web]]. Alcuni deplorarono la decisione di Apple di creare un nuovo elemento proprietario invece di supportare lo standard [[Scalable Vector Graphics|SVG]], che non era ancora stato del tutto recepito dal web. Altri criticarono la logica che stava alla base dell'elemento: la sua essenza procedurale e la mancanza di una controparte dichiarativa consentiva al ''canvas'' di "disegnare", ma gli elementi disegnati non erano identificabili con qualcosa di simile ad un [[Document Object Model|DOM]]. Altri ancora mostrarono preoccupazione non tanto per l'estensione proprietaria in sé, ma per la sintassi che è stata proposta per l'utilizzo della stessa. Costoro, per esempio, ritengono indesiderabile l'impossibilità di calare l'elemento all'interno di un [[namespace]].<ref>{{en}}[http://ln.hixie.ch/?start=1089635050&count=1 Commenti di Ian Hickson su canvas e sulle altre estensioni all'HTML di Apple]</ref>

Uno sviluppatore web, insoddisfatto dal livello del supporto del formato SVG in Safari, ha sviluppato un [[raster]]izzatorerasterizzatore in [[JavaScript]], che ha chiamato ''SVG Tiny 1.2 to canvas'', per dimostrare la mancata veridicità di affermazioni secondo le quali l'implementazione del ''canvas'' in Safari sarebbe stata molto più facile, rispetto ad una completa integrazione di SVG.<ref>{{en}}[http://fuchsia-design.com/CanvaSVG/ Oggetto JavaScript canvaSVG che elabora documenti SVG come se fossero canvas] {{webarchive|url=https://web.archive.org/web/20070717103311/http://fuchsia-design.com/CanvaSVG/ |data=17 luglio 2007 }}</ref>

== WebGL ==

Riga 146:

* {{en}} [https://web.archive.org/web/20070317075224/http://caimansys.com/painter/ Canvas Painter] - Applicazione dimostrativa di disegno, creata utilizzando dei widget.

* {{en}} [http://jsmsx.sourceforge.net jsMSX] ([http://jsmsxdemo.googlepages.com/jsmsx.html demo] {{Webarchive|url=https://web.archive.org/web/20070314043325/http://jsmsxdemo.googlepages.com/jsmsx.html |date=14 marzo 2007 }}) - [[Emulatore]] [[MSX]] scritto completamente in [[JavaScript]].

* {{en}} [https://web.archive.org/web/20070314005832/http://www.liquidx.net/plotkit/ PlotKit] - Esempio di disegno di grafici attraverso l'utilizzo di un toolkit.

Riga 168:

* {{cita web|https://developer.mozilla.org/en/docs/Canvas_tutorial|Canvas tutorial e pagina introduttiva su Mozilla Developer center|lingua=en}}

{{Interfacce web}}

{{Portale|Telematica}}