Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 338991
  • Created:
  • Creator: Grino
  • Is current revision?
  • Comment Modifich minime. Aggiunto un punto alla sezione Librerie

Revision Content

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

DocumentaZIONE

Specifiche
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
Esecitazione sui canvas
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
Frammenti di codice: Canvas
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
Esempi di canvas
Alcune dimostraioni sui <canvas>.
Disegnare oggetti DOM in un canvas
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
Un semplice raycaster
Una demo di animazione ray-tracing utilizzando il canvas.
Interfacce dei Canvas nel DOM
Interfacce dei Canvas nel DOM implementate in Gecko.

Vedi tutto...

ComunitÀ

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
Canvas-Developers Yahoo Group

Risorse

Librerie

  • libCanvas è un potente e leggero framework per canvas
  • Processing.js implementzione del linguaggio di visualizzazione Processing
  • EaselJS è una libreria con un'API simile a Flash
  • PlotKit è una libreria per la creazione di grafici e diagrammi
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
{{ HTML5ArticleTOC() }}

Revision Source

<p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p>
<p>Le applicazioni Mozilla supportano <code>&lt;canvas&gt;</code> a partire da Gecko 1.8 (cioè <a href="/en-US/docs/Firefox_1.5_for_developers" title="en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>). L'elemento è stato originariamente introdotto da Apple per OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> e Safari. Internet Explorer supporta <code>&lt;canvas&gt;</code> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <code>&lt;canvas&gt;</code> includendo lo script del progetto <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> di Google. Anche Google Chrome e Opera 9 supportano <code>&lt;canvas&gt;</code>.</p>
<p>L'elemento <code>&lt;canvas&gt;</code> è utilizzato anche da <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a> per la grafica 3D con accellerazione hardware nelle pagine web.</p>
<table class="topicpage-table">
  <tbody>
    <tr>
      <td>
        <h2 class="Documentation" id="Documentation" name="Documentation">DocumentaZIONE</h2>
        <dl>
          <dt>
            <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Specifiche</a></dt>
          <dd>
            L'elemento <code>&lt;canvas&gt;</code> è parte delle specifiche 1.0 della WhatWG per le applicazioni&nbsp; Web, anche conosciute come HTML5.</dd>
          <dt>
            <a href="/en-US/docs/Canvas_tutorial" title="en-US/docs/Canvas_tutorial">Esecitazione sui canvas</a></dt>
          <dd>
            Un'esercitazione completa che copre sia l'utilizzo base&nbsp; che le caratteristiche avanzate di <code>&lt;canvas&gt;</code>.</dd>
          <dt>
            <a href="/en-US/docs/Code_snippets/Canvas" title="en-US/docs/Code_snippets/Canvas">Frammenti di codice: Canvas</a></dt>
          <dd>
            Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <code>&lt;canvas&gt;</code>.</dd>
          <dt>
            <a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Esempi di canvas</a></dt>
          <dd>
            Alcune dimostraioni sui <code>&lt;canvas&gt;</code>.</dd>
          <dt>
            <a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="en-US/docs/HTML/Canvas/Drawing DOM objects into a canvas">Disegnare oggetti DOM in un canvas</a></dt>
          <dd>
            Come disegnare contenuto DOM, come elementi HTML, in un canvas.</dd>
          <dt>
            <a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Un semplice raycaster</a></dt>
          <dd>
            Una demo di animazione ray-tracing utilizzando il canvas.</dd>
          <dt>
            <a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Interfacce dei Canvas nel DOM</a></dt>
          <dd>
            Interfacce dei Canvas nel DOM implementate in Gecko.</dd>
        </dl>
        <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Vedi tutto...</a></span></p>
      </td>
      <td>
        <h2 class="Community" id="Comunit.C3.80">ComunitÀ</h2>
        <p>Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}<br />
          <a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-Developers Yahoo Group</a></p>
        <h2 class="Resources" id="Resources" name="Resources">Risorse</h2>
        <ul>
          <li><a class="external" href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Approfondimento HTML5 Canvas</a></li>
          <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Cheat Sheet per Canvas</a> (<a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
        </ul>
        <h2 class="Libraries" id="Libraries" name="Libraries">Librerie</h2>
        <ul>
          <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> è un potente e leggero framework per canvas</li>
          <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> implementzione del linguaggio di visualizzazione Processing</li>
          <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> è una libreria con un'API simile a Flash</li>
          <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> è una libreria per la creazione di grafici e diagrammi</li>
          <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> è un'API per le animazioni Canvas basata sui keyframe</li>
          <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.</li>
          <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizzazioni di dati interattive per il Web con Canvas 2D</li>
          <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> è un framework per lo sviluppo di applicazioni e giochi</li>
        </ul>
        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">ARGOMENTI CORRELATI</h2>
        <ul>
          <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="en-US/docs/WebGL">WebGL</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<div>
  {{ HTML5ArticleTOC() }}</div>
Revert to this revision