Canvas (elemento HTML): differenze tra le versioni

Versione delle 16:59, 14 mar 2007

Versione attuale delle 13:05, 3 feb 2025

(91 versioni intermedie di 57 utenti non mostrate)

Riga 1:

'''Canvas''' è un elemento dello standard [[HTML5]] che permette il [[rendering]] dinamico di immagini [[bitmap]] attraverso un [[Script|linguaggio di scripting]].

{{T|lingua=inglese|argomento=informatica|data=marzo 2007}}

{{S|informatica}}

'''Canvas''' è una estensione dell'[[HTML]] standard <!-- that allows for dynamic rendering of [[Scripting language|scriptable]] [[bitmap]] images.

== Storia ==

It was initially introduced by [[Apple Computer|Apple]] for use inside their own [[Mac OS X]] [[Webkit]] component, powering applications like [[Dashboard (software)|Dashboard]] widgets and the [[Safari (browser)|Safari]] browser. Later, it was adopted by [[Gecko (layout engine)|Gecko]] browsers (notably [[Mozilla Application Suite|Mozilla]] and [[Mozilla Firefox|Firefox]]) and [[Opera (internet suite)|Opera]]<ref>[http://www.opera.com/docs/changelogs/windows/900/ Opera 9.0 changelog]</ref>, and standardized by the [[Web Hypertext Application Technology Working Group|WHATWG]] on new proposed specifications for next generation web technologies. [[Novell]] manufactures an [[XForms]] processor plugin for [[Internet Explorer]], which also provides support for the canvas element.<ref>[http://lab.cph.novell.com/nxie/ Novell XForms Explorer]</ref> Independent efforts to support the canvas feature on Internet Explorer do not require plugins and are based solely on [[Vector Markup Language|VML]] and [[JavaScript]].<ref>[http://me.eae.net/archive/2005/12/29/canvas-in-ie/ Canvas in IE]</ref> Google has also begun a project to add canvas abilities to Internet Explorer using the same techniques.<ref>[http://excanvas.sourceforge.net/ Google's Canvas in IE project]</ref>

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 ==

Canvas consists of a drawable region defined in HTML code with ''height'' and ''width'' attributes. [[JavaScript]] code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, and image composition.-->

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.

<!--

==Reactions==

At the time of its introduction the canvas element met with mixed reactions from the web standards community. Some complained about Apple's decision to create a new proprietary element instead of supporting the [[Scalable Vector Graphics|SVG]] standard, which still has not achieved broad web acceptance. Some others argued about the logic upon which canvas was conceived: being completely procedural and not having a descriptive counterpart allowed canvas to 'paint', but drawn elements are not identifiable in a [[Document Object Model|DOM]]-like way. Other people raised concerns, not about the proprietary extension per se, but in regard to the proposed syntax for those elements. For example, they consider the absence of a [[namespace]] indication to be undesirable.<ref>[http://ln.hixie.ch/?start=1089635050&count=1 Ian Hickson remarks regarding canvas and other Apple extensions to HTML]</ref>

<!--

A web developer unsatisfied by the level of SVG support in Safari has pushed himself to develop an ''SVG Tiny 1.2 to canvas'' [[Rasterisation|rasteriser]] in [[JavaScript]], as a [[proof of concept]] against claims that canvas was a lot easier to implement in Safari than a complete SVG integration.<ref>[http://fuchsia-design.com/CanvaSVG/ canvaSVG Javascript object for rendering SVG documents in canvas]</ref> -->

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

<!--

<syntaxhighlight lang="html">

==Examples==

<canvas id="example" width="200" height="200">

*[http://www.calc5.com/ Calc5] - Javascript calculator with charting abilities.

Questo testo viene mostrato se il browser non supporta i canvas.

*[http://www.greatwebwall.com Great Web Wall] - Live Internet wall implemented with Canvas element.

</canvas>

*[http://www.abrahamjoffe.com.au/ben/canvascape/ Canvascape] - A 3D game implemented with Canvas.

</syntaxhighlight>

*[http://bennolan.com/articles/2007/01/24/moon-lander-using-the-canvas-tag MoonLander] - MoonLander written using the canvas tag.

*[http://overstimulate.com/projects/canvas/ Various demos] - Various canvas demos (a chart, a live server monitor, a [[L-system|Lindenmayer system]] implementation)

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

*[http://virtuelvis.com/download/2005/10/mandelbrot/ Fractals] - An example of fractals rendering

<syntaxhighlight lang="javascript">

*[http://www.agustinfernandez.com.ar/proyectos/canvas/ Frames] - Drawing decorative borders around standard HTML elements

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

*[http://developer.mozilla.org/presentations/xtech2005/svg-canvas/CanvasDemo.html Tucanos] - The tucanos demo

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

*[http://ponderer.org/download/canvas_demo/ Free drawing] - Free drawing example

context.fillStyle = 'red';

*[http://bendiken.net/scripts/game-of-life/ Conway's Game of Life] - the widely-known cellular automaton implemented using Canvas.

context.fillRect(30, 30, 50, 50);

*[http://testzone.danieljmarra.com/canvas/canvaspong/ Canvas Pong] - A pong recreation using the canvas tag.

</syntaxhighlight>

*[http://caimansys.com/painter/ Canvas Painter] - A simple canvas-based paint demo using widgets.

*[http://dave-webster.com/projects/index.php?page=incs/plasma_demo1 Canvas plasma demo] - Simple port of a C plasma demo

L'API Canvas fornisce anche <code>save()</code>e <code>restore()</code>, per salvare e ripristinare tutti gli attributi del contesto canvas.

*[http://chris-malcolm.com/canvas/breakout.html Breakout using canvas] -The classic game, Breakout, using the canvas tag.

*[http://jsmsx.sourceforge.net jsMSX] ([http://jsmsxdemo.googlepages.com/jsmsx.html demo]) - [[MSX]] [[Emulator]] 100% written in [[Javascript]].

=== Canvas e CSS ===

*[http://www.liquidx.net/plotkit/ PlotKit] - A number of charting examples with a toolkit.

Canvas può essere formattato mediante [[CSS]]:

*[http://www.pixelinstrument.net/portfolio/ourdemos/arkanoid.php JS Arkanoid] - An arkanoid clone using canvas.

<syntaxhighlight lang="html">

*[http://henrikfalck.com/unrealsoccer/ Unreal Soccer] - [[Soccer]] game that uses canvas

<!DOCTYPE html>

*[http://lsysjs.qwert.ch/ LSys/JS] - Interactive [[L-System]] interpreter using canvas.

<html>

*[http://ajax3d.sourceforge.net/ Ajax3d] - A 3d engine and simple game implemented with Canvas.-->

<head>

<!--

<title>Dimensione del canvas: 600 x 300, dimensione superficie disegnabile del canvas: 300 x 150</title>

==See also==

<style>

*[[Scalable Vector Graphics|SVG]]

body {

*[[Quartz (graphics layer)]]

background: #dddddd;

*[[Cairo (graphics)]]

}

*[[WHATWG Compare|Comparison of layout engines (Web Applications 1.0)]]-->

#canvas {

<!--

margin: 20px;

==External links==

padding: 20px;

*[http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic Canvas description in WHATWG Web Applications draft specifications]

background: #ffffff;

*[http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/30001240-CJBCECGI.html#//apple_ref/doc/uid/30001236 Canvas reference page in Apple Developers Connection]

border: thin inset #aaaaaa;

*[http://developer.mozilla.org/en/docs/Canvas_tutorial Canvas tutorial and introductory page on Mozilla Developer center]-->

width: 600px;

height: 300px;

}

</style>

</head>

<body>

<canvas id="canvas">

Canvas non supportato

</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.

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|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 [[JavaScript]] 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>

|'''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.

* {{en}} [https://web.archive.org/web/20070314023517/http://overstimulate.com/projects/canvas/ Various demos] - Diversi esempi di utilizzo di canvas (un grafico, uno strumento per tener d'occhio un server, e l'implementazione di un [[sistema di Lindenmayer]]).

* {{cita web|https://developer.mozilla.org/presentations/xtech2005/svg-canvas/CanvasDemo.html|Tucanos|lingua=en}}

* {{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.

* {{en}} [https://web.archive.org/web/20090201053112/http://lsysjs.qwert.ch/ LSys/JS] - Interprete interattivo di un [[Sistema di Lindenmayer|Sistema L]] che usa Canvas.

* {{en}} [http://ajax3d.sourceforge.net/ Ajax3d] - Un motore 3D e un gioco scritti usando Canvas.

* [https://web.archive.org/web/20080929054359/http://bart99.altervista.org/smith/ Smith Chart demo] - Demo della carta di Smith che utilizza Canvas

== Note ==

<references/>

== Voci correlate ==

* [[Scalable Vector Graphics]]

* [[Quartz (graphics layer)]]

* [[Cairo (graphics)]]

* [[WHATWG Compare]]

== Collegamenti esterni ==

* {{cita web|https://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic|Descrizione di Canvas nelle specifiche WHATWG Web Applications draft|lingua=en}}

* {{cita web|https://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/30001240-CJBCECGI.html#//apple_ref/doc/uid/30001236|Pagina di reference per Canvas su Apple Developers Connection|lingua=en}}

* {{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}}

[[Categoria:HTML5]]