Canvas (elemento HTML): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
testo e aggiornamento |
m Corretto il collegamento Raster con link removed (DisamAssist) |
||
| (12 versioni intermedie di 8 utenti non mostrate) | |||
Riga 1:
'''Canvas''' è
== Storia ==
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.
== 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">
<canvas id="example" width="200" height="200">
</canvas>
</syntaxhighlight>
Utilizzando JavaScript è possibile aggiungere dei disegni; ad esempio, questo codice disegna un rettangolo rosso sullo schermo:
<syntaxhighlight lang="javascript">
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</syntaxhighlight>
L'API Canvas fornisce anche <code>save()</code>e <code>restore()</code>, per salvare e ripristinare tutti gli attributi del contesto canvas.
=== Canvas e CSS ===
Canvas può essere formattato
<syntaxhighlight lang="html"> <!DOCTYPE html>
<html>
<head>
<title>
<style>
body {
Line 41 ⟶ 48:
<body>
<canvas id="canvas">
Canvas
</canvas>
</body>
</html>
</syntaxhighlight>
=== Differenze tra SVG e Canvas ===
{{Vedi anche|Scalable Vector Graphics}}
[[File:Css-drawing.png|alt=Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.|miniatura|Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas. A volte è possibile ottenere lo stesso risultato con tecniche diverse.]]
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 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>.
SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno di SVG DOM. Si possono allegare gestori di eventi JavaScript per un elemento.
Line 59 ⟶ 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
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 [[JavaScript
{| 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>
|'''SVG'''
|'''Canvas'''
|-
|Vettori
|SI
|NO
|-
|Rasterizzazione
|NO
|SI
|-
|Accesso DOM
|SI
|NO
|-
|Accessibilità
|SI
|Parziale
|-
|Testo
|SI
|SI
|-
|Gradienti e Patterns
|SI
|SI
|-
|CSS Animations
|SI
|NO
|-
|CSS Filters
|SI
|SI
|-
|SVG Filters
|SI
|SI
|-
|Inclusione video
|NO
|SI
|-
|Manipolazione Pixel
|NO
|SI
|-
|Accesso API in JS
|NO
|SI
|}
== 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 rasterizzatore 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.
* {{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 ⟶ 143:
* {{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] {{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.
* {{en}} [http://henrikfalck.com/unrealsoccer/ Unreal Soccer] - Simulatore di [[Calcio (sport)|calcio]] scritto usando Canvas.
Line 95 ⟶ 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}}
| |||