Canvas (elemento HTML): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
testo e aggiornamento |
testo e immagine |
||
Riga 46:
</html>
</syntaxhighlight>
== Reazioni ==▼
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]]izzatore 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>▼
=== Differenze tra SVG e Canvas ===
{{Vedi anche|Scalable Vector Graphics}}
SVG è un linguaggio per descrivere la grafica 2D in XML<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg|titolo=- SVG: Scalable Vector Graphics {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-19}}</ref>. [[Canvas (elemento HTML)|Canvas]] disegna grafica 2D, al volo (con JavaScript)<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web|titolo=Adding vector graphics to the Web - Learn web development {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-19}}</ref>.
Line 64 ⟶ 61:
Le immagini create in SVG sono aggiunte al [[DOM]] e modificabili tramite [[JavaScript|Javascript]] e [[CSS|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>.
▲== Reazioni ==
▲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]]izzatore 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 ==
{{Vedi anche|WebGL}}
[[File:Webgl materials normalmap2.png|alt=Esempio di Canvas usato in WebGL|miniatura|Esempio di Canvas usato in [[WebGL]]]]
WebGL è una libreria grafica per il web ([[World Wide Web|'''Web''']]-based '''G'''raphics '''L'''ibrary). Usa l'elemento Canvas [[HTML5]] e vi si accede attraverso le interfacce [[Document Object Model]].
== Esempi ==
[[File:Flip-book-canvas.png|alt=Esempio di Canvas. Effetto "flip" (volta pagina). Si può creare anche in PDF oppure convertire quest'ultimo in Canvas o viceversa.|miniatura|300x300px|Esempio di Canvas. Effetto "flipbook" online (volta pagina). Si può creare anche in [[Portable Document Format|PDF]] oppure convertire quest'ultimo in Canvas o viceversa<ref>{{Cita web|url=https://medium.com/@jacobsutton/how-to-make-a-html5-flipbook-for-free-easy-tutorial-f0247a1288|titolo=How to make a HTML5 Flipbook for Free! [Easy Tutorial]|autore=Jacob Sutton|sito=Medium|data=2019-04-09|lingua=en|accesso=2021-01-29}}</ref>.]]
* [http://www.amid86.it/rubik/ Cubo di Rubik NxNxN] - Simulatore 3D e Risolutore di Cubi di Rubik NxNxN implementato in JavaScript e Canvas. ▼
▲* [http://www.amid86.it/rubik/ Cubo di Rubik NxNxN] - Simulatore 3D e Risolutore di Cubi di Rubik NxNxN implementato in JavaScript e Canvas.
* {{en}} [https://web.archive.org/web/20070322235903/http://www.calc5.com/ Calc5] - Calcolatrice in JavaScript che può rappresentare in un grafico i risultati ottenuti.
* {{en}} [http://www.benjoffe.com/code/demos/canvascape/ Canvascape] - Un gioco 3D creato usando Canvas.
Line 73 ⟶ 83:
* {{en}} [http://ponderer.org/download/canvas_demo/ Free drawing] - Esempio di disegno libero.
* {{en}} [http://testzone.danieljmarra.com/canvas/canvaspong/ Canvas Pong] - Una reimplementazione di Pong che usa Canvas.
* {{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]) - [[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.
* {{en}} [http://henrikfalck.com/unrealsoccer/ Unreal Soccer] - Simulatore di [[Calcio (sport)|calcio]] scritto usando Canvas.
| |||