mozilla

Revision 348781 of Canvas

  • Revision slug: HTML/Canvas
  • Revision title: Canvas
  • Revision id: 348781
  • Created:
  • Creator: Karvjorm
  • Is current revision? Ei
  • Comment

Revision Content

HTML5:een lisätty HTML {{HTMLElement("canvas")}}-elementti on elementti, jota voidaan käyttää grafiikan piirtämiseen skriptaamalla (tavallisesti JavaScript-kielellä). Sitä voidaan käyttää esimerkiksi diagrammojen piirtämiseen, valokuvayhdistelmien tekemiseen, animaatioiden luomiseen ja jopa ajantasaiseen video-käsittelyyn.

Mozilla-sovellukset saivat <canvas>-tuen Gecko 1.8-versiosta alkaen (toisin sanoen Firefox 1.5:stä lähtien). Elementin esitteli alunperin Apple OS X-käyttöjärjestelmä Dashboard- ja Safari-sovelluksissa. Internet Explorer tukee <canvas>:ia versiosta 9 lähtien; IE-selaimen aiemmissa versioissa webbisivulle voidaan tehokkaasti lisätä <canvas>-tuki Googlen Explorer Canvas-hankkeen skriptillä. Google Chrome ja Opera 9 tukevat myös <canvas>:ia.

WebGL käyttää myös <canvas>-elementtiä 3D-grafiikan laitteistokiihdytykseen webbisivuilla.

Dokumentaatio

Spesifikaatio
Elementti <canvas> on osa WhatWG Web applications 1.0 -spesifikaatiota, joka tunnetaan myös nimellä HTML5.
Canvas-oppikurssi
Laaja oppikurssi, joka kattaa sekä <canvas>-peruskäytön että sen edistyneemmät ominaisuudet.
Koodikatkelma:Canvas
Joitakin <canvas>:iin liittyviä koodikatkelmia.
Canvas-esimerkkejä
Muutama <canvas>-esittelyohjelma.
DOM-objektien piirtäminen canvas-elementtiin
Kuinka piirtää canvas-komponenttiin DOM-sisältö, kuten HTML-elementit.
Perussädeheittäjä
Canvasia käyttävä sädejäljitysanimaation esittelyohjelma.
Canvas DOM -rajapinnat
Canvas DOM -rajapinnat Gecko-alustalla.

Katso kaikkia...

Yhteisö

Resurssit

Kirjastot

  • libCanvas on tehokas ja kevyt canvas-ympäristö
  • Processing.js on toiseen käyttöympäristöön siirretty Prosessin visualisointikieli
  • EaselJS on kirjasto, jossa on Flash-tyyppinen sovellusohjelmointirajapinta (API)
  • PlotKit on taulukko- ja grafiikkakirjasto
  • Rekapi on animaatioympäristön sovellusohjelmointirajapinta Canvasille
  • PhiloGL on WebGL-ympäristö datan visualisointiin, luovaan koodaukseen ja pelikehitykseen.
  • JavaScript InfoVis Toolkit luo vuorovaikutteisia 2D Canvas -datavisualisointeja webbiin.
  • Frame-Engine on sovellusten ja pelin kehitysympäristö
{{HTML5ArticleTOC()}}

Revision Source

<p><a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>:een lisätty <strong>HTML {{HTMLElement("canvas")}}-elementti</strong> on elementti, jota voidaan käyttää grafiikan piirtämiseen skriptaamalla (tavallisesti <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>-kielellä). Sitä voidaan käyttää esimerkiksi diagrammojen piirtämiseen, valokuvayhdistelmien tekemiseen, animaatioiden luomiseen ja jopa ajantasaiseen video-käsittelyyn.</p>
<p>Mozilla-sovellukset saivat <code>&lt;canvas&gt;</code>-tuen Gecko 1.8-versiosta alkaen (toisin sanoen <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>:stä lähtien). Elementin esitteli alunperin Apple OS X-käyttöjärjestelmä <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a>- ja Safari-sovelluksissa. Internet Explorer tukee <code>&lt;canvas&gt;</code>:ia versiosta 9 lähtien; IE-selaimen aiemmissa versioissa webbisivulle voidaan tehokkaasti lisätä <code>&lt;canvas&gt;</code>-tuki Googlen <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a>-hankkeen skriptillä. Google Chrome ja Opera 9 tukevat myös <code>&lt;canvas&gt;</code>:ia.</p>
<p><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> käyttää myös <code>&lt;canvas&gt;</code>-elementtiä 3D-grafiikan laitteistokiihdytykseen webbisivuilla.</p>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentaatio</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">Spesifikaatio</a></dt>
      <dd>
        Elementti <code>&lt;canvas&gt;</code> on osa WhatWG Web applications 1.0 -spesifikaatiota, joka tunnetaan myös nimellä HTML5.</dd>
      <dt>
        <a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas-oppikurssi</a></dt>
      <dd>
        Laaja oppikurssi, joka kattaa sekä <code>&lt;canvas&gt;</code>-peruskäytön että sen edistyneemmät ominaisuudet.</dd>
      <dt>
        <a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">Koodikatkelma:Canvas</a></dt>
      <dd>
        Joitakin <code>&lt;canvas&gt;</code>:iin liittyviä koodikatkelmia.</dd>
      <dt>
        <a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas-esimerkkejä</a></dt>
      <dd>
        Muutama <code>&lt;canvas&gt;</code>-esittelyohjelma.</dd>
      <dt>
        <a href="/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" title="HTML/Canvas/Drawing DOM objects into a canvas">DOM-objektien piirtäminen canvas-elementtiin</a></dt>
      <dd>
        Kuinka piirtää canvas-komponenttiin DOM-sisältö, kuten HTML-elementit.</dd>
      <dt>
        <a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Perussädeheittäjä</a></dt>
      <dd>
        Canvasia käyttävä sädejäljitysanimaation esittelyohjelma.</dd>
      <dt>
        <a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="Gecko_DOM_Reference#Canvas_interfaces">Canvas DOM -rajapinnat</a></dt>
      <dd>
        Canvas DOM -rajapinnat Gecko-alustalla.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="tag/HTML:Canvas">Katso kaikkia...</a></span></p>
  </div>
  <div class="section">
    <h2 class="Community" id="Yhteis.C3.B6">Yhteisö</h2>
    <ul>
      <li>Katso Mozilla-foorumeita... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li>
      <li><a class="external" href="http://groups.yahoo.com/group/canvas-developers/">Canvas-kehittäjät Yahoo-ryhmä</a></li>
    </ul>
    <h2 class="Resources" id="Resources" name="Resources">Resurssit</h2>
    <ul>
      <li><a class="external" href="http://joshondesign.com/p/books/canvasdeepdive/title.html" title="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Syvä sukellus HTML5 Canvasiin</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">Canvas-muistilappu</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">Kirjastot</h2>
    <ul>
      <li><a class="external" href="http://libcanvas.github.com/" title="http://libcanvas.github.com/">libCanvas</a> on tehokas ja kevyt canvas-ympäristö</li>
      <li><a class="external" href="http://processingjs.org" title="http://processingjs.org/">Processing.js</a> on toiseen käyttöympäristöön siirretty Prosessin visualisointikieli</li>
      <li><a class="external" href="http://easeljs.com/" title="http://easeljs.com/">EaselJS</a> on kirjasto, jossa on Flash-tyyppinen sovellusohjelmointirajapinta (API)</li>
      <li><a class="external" href="http://www.liquidx.net/plotkit/" title="http://www.liquidx.net/plotkit/">PlotKit</a> on taulukko- ja grafiikkakirjasto</li>
      <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> on animaatioympäristön sovellusohjelmointirajapinta Canvasille</li>
      <li><a class="external" href="http://senchalabs.github.com/philogl/" title="http://senchalabs.github.com/philogl/">PhiloGL</a> on WebGL-ympäristö datan visualisointiin, luovaan koodaukseen ja pelikehitykseen.</li>
      <li><a class="external" href="http://thejit.org/" title="http://thejit.org/">JavaScript InfoVis Toolkit</a> luo vuorovaikutteisia 2D Canvas -datavisualisointeja webbiin.</li>
      <li><a href="http://www.frame-engine.com" title="http://www.frame-engine.com">Frame-Engine</a> on sovellusten ja pelin kehitysympäristö</li>
    </ul>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Asiaan liittyvät aiheet</h2>
    <ul>
      <li><a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></li>
    </ul>
  </div>
</div>
<div>
  {{HTML5ArticleTOC()}}</div>
Revert to this revision