Canvas (elemento HTML): differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m Corretto il collegamento Raster con link removed (DisamAssist) |
|||
| (9 versioni intermedie di 8 utenti non mostrate) | |||
Riga 1:
'''Canvas''' è
Fu inizialmente introdotta da [[Apple]] per uso all'interno del loro componente [[macOS]] [[WebKit]], per migliorare applicazioni come [[Dashboard]] widgets ed il browser [[Safari (browser)|Safari]].▼
== Storia ==
Più tardi fu adottata dai browser [[Gecko]] ([[Mozilla Application Suite|Mozilla]] e [[Mozilla Firefox|Firefox]]) ed [[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 standardizzati 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.▼
▲Più tardi
== 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">▼
<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>
Line 49 ⟶ 56:
=== 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>.
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 56 ⟶ 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>
Line 118 ⟶ 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
== WebGL ==
Line 139 ⟶ 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 }}) -
* {{en}} [https://web.archive.org/web/20070314005832/http://www.liquidx.net/plotkit/ PlotKit] - Esempio di disegno di grafici attraverso l'utilizzo di un toolkit.
Line 161 ⟶ 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}}
| |||