Canvas (elemento HTML): differenze tra le versioni

Versione delle 19:40, 24 nov 2009

Versione delle 21:51, 24 dic 2009

Riga 5:

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.

== 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 procedurale consentiva a 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 di 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]</ref>

== Esempi ==

* {{it}}[http://www.andreanimarco.it/amid86/rubik/ Cubo di Rubik NxNxN] - Simulatore 3D e Risolutore di Cubi di Rubik NxNxN implementato in JavaScript e Canvas.

* {{en}}[http://www.calc5.com/ Calc5] - Calcolatrice in JavaScript che può rappresentare in un grafico i risultati ottenuti.

* {{en}}[http://www.abrahamjoffe.com.au/ben/canvascape/ Canvascape] - Un gioco 3D creato usando Canvas.

* {{en}}[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 L]]indenmayer).

* {{en}}[http://virtuelvis.com/download/2005/10/mandelbrot/ Fractals] - Esempio di generazione di un [[frattale]].

* {{en}}[http://www.agustinfernandez.com.ar/proyectos/canvas/ Frames] - Disegno di bordi decorativi attorno ad elementi HTML standard.

* {{en}}[http://developer.mozilla.org/presentations/xtech2005/svg-canvas/CanvasDemo.html Tucanos]

* {{en}}[http://ponderer.org/download/canvas_demo/ Free drawing] - Esempio di disegno libero.

* {{en}}[http://bendiken.net/scripts/game-of-life/ Conway's Game of Life] - Implementazione mediante Canvas del noto simulatore di una forma di vita monocellulare.

* {{en}}[http://testzone.danieljmarra.com/canvas/canvaspong/ Canvas Pong] - Una reimplementazione di Pong che usa Canvas.

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

* {{en}}[http://dave-webster.com/projects/index.php?page=incs/plasma_demo1 Canvas plasma demo] - Port di un'applicazione dimostrativa.

* {{en}}[http://chris-malcolm.com/canvas/breakout.html Breakout using canvas] - Il classico Breakout, implementato usando Canvas.

* [{{en}}http://jsmsx.sourceforge.net jsMSX] ([http://jsmsxdemo.googlepages.com/jsmsx.html demo]) - [[Emulatore]] [[MSX]] scritto completamente in [[Javascript]].

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

* {{en}}[http://www.pixelinstrument.net/portfolio/ourdemos/arkanoid.php JS Arkanoid] - Clone di Arkanoid che usa Canvas.

* {{en}}[http://henrikfalck.com/unrealsoccer/ Unreal Soccer] - Simulatore di [[Calcio (sport)|calcio]] scritto usando Canvas.

* {{en}}[http://lsysjs.qwert.ch/ LSys/JS] - Interprete interattivo di un [[Sistema L]] che usa Canvas.

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

* {{it}}[http://bart99.altervista.org/smith/ Smith Chart demo] - Demo della carta di Smith che utilizza Canvas

== Note ==

<references/>

== Voci correlate ==

* [[Scalable Vector Graphics|SVG]]

* [[Quartz (graphics layer)]]

* [[Cairo (graphics)]]

* [[WHATWG Compare|Comparazione di layout engines (Web Applications 1.0)]]

== Collegamenti esterni ==

* {{en}}[http://www.whatwg.org/specs/web-apps/current-work/#scs-dynamic Descrizione di Canvas nelle specifiche WHATWG Web Applications draft]

* {{en}}[http://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]

* {{en}}[http://developer.mozilla.org/en/docs/Canvas_tutorial Canvas tutorial e pagina introduttiva su Mozilla Developer center]

{{Portale|Telematica}}

Riga 53:

[[cs:Canvas]]

[[de:Canvas (HTML-Element)]]

[[en:Canvas (HTML element)]]

[[es:Canvas]]

[[fr:Canvas (balise html)]]