Canvas ismertető

  • Revision slug: Canvas_ismerteto
  • Revision title: Canvas ismertető
  • Verzióazonosító: 320243
  • Létrehozva:
  • Létrehozó: urbalazs
  • Aktuális verzió? Igen
  • Megjegyzés

Változat tartalma

A <canvas> egy olyan HTML elem, amely parancsfájlok (általában JavaScript) segítségével rajzolásra használható. Használható például grafikonok rajzolásához, készíthetők vele fénykép összeállítások, vagy akár egyszerű (és nem túl egyszerű) animációk. A jobb oldalon lévő kép néhány olyan <canvas> megvalósítást mutat, amely később feltűnik majd ebben az ismertetőben.

A <canvas> elemet először az Apple mutatta be a Mac OS X Dashboardhoz és később implementálta a Safari és a Google Chrome. A Gecko 1.8 alapú böngészők, mint például a Firefox 1.5, szintén támogatják ezt az elemet. A <canvas> elem a WhatWG Web alkalmazások 1.0 specifikáció része, amely HTML 5 néven is ismert.

Ez az ismertető bemutatja, hogy miként lehet megvalósítani a <canvas> elemt az ön HTML oldalain. A bemutatott példák egyszerű ötleteket adnak, hogy mi mindent lehet készíteni a <canvas> elemmel és használhatók a saját megvalósításai kivitelezéséhez.

Mielőtt nekilátna

A <canvas> elem használata nem túl bonyolult, de szükséges hozzá a HTML és a JavaScript alapszintű ismerete.

A <canvas> elemet néhány régebbi böngésző nem támogatja, de támogatja a Firefox 1.5 és későbbi változata, az Opera 9 és későbbi változata, a Safari újabb verziói, a Chrome, és Internet Explorer 9.

Ebben az ismertetőben az alábbiakról lesz szó

Lásd még

{{ Next("Canvas_tutorial/Basic_usage") }}

Változat forrása

<p>A <strong><code><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">&lt;canvas&gt;</a></code></strong> egy olyan <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> elem, amely parancsfájlok (általában <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>) segítségével rajzolásra használható. Használható például grafikonok rajzolásához, készíthetők vele fénykép összeállítások, vagy akár egyszerű (és <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="en-US/docs/A_Basic_RayCaster">nem túl egyszerű</a>) animációk. A jobb oldalon lévő kép néhány olyan <code>&lt;canvas&gt;</code> megvalósítást mutat, amely később feltűnik majd ebben az ismertetőben.</p>
<p>A <code>&lt;canvas&gt;</code> elemet először az Apple mutatta be a Mac OS X Dashboardhoz és később implementálta a Safari és a Google Chrome. A <a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> 1.8 alapú böngészők, mint például a Firefox 1.5, szintén támogatják ezt az elemet. A <code>&lt;canvas&gt;</code> elem a <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web alkalmazások 1.0</a> specifikáció része, amely HTML 5 néven is ismert.</p>
<p>Ez az ismertető bemutatja, hogy miként lehet megvalósítani a <code>&lt;canvas&gt;</code> elemt az ön HTML oldalain. A bemutatott példák egyszerű ötleteket adnak, hogy mi mindent lehet készíteni a <code>&lt;canvas&gt;</code> elemmel és használhatók a saját megvalósításai kivitelezéséhez.</p>
<h2 id="Before_you_start" name="Before_you_start">Mielőtt nekilátna</h2>
<p>A <code>&lt;canvas&gt;</code> elem használata nem túl bonyolult, de szükséges hozzá a <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> és a <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a> alapszintű ismerete.</p>
<p>A <code>&lt;canvas&gt;</code> elemet néhány régebbi böngésző nem támogatja, de támogatja a Firefox 1.5 és későbbi változata, az Opera 9 és későbbi változata, a Safari újabb verziói, a Chrome, és Internet Explorer 9.</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">Ebben az ismertetőben az alábbiakról lesz szó</h2>
<ul>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_usage" title="en-US/docs/Canvas_tutorial/Basic_usage">Alapvető használat</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Drawing_shapes" title="en-US/docs/Canvas_tutorial/Drawing_shapes">Alakzatok rajzolása</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Using_images" title="en-US/docs/Canvas_tutorial/Using_images">Képek használata</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Applying_styles_and_colors" title="en-US/docs/Canvas_tutorial/Applying_styles_and_colors">Stílusok alkalmazása és színek</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Transformations" title="en-US/docs/Canvas_tutorial/Transformations">Transzformációk</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Compositing" title="en-US/docs/Canvas_tutorial/Compositing">Összeállítások</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_animations" title="en-US/docs/Canvas_tutorial/Basic_animations">Alapvető animációk</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas">A canvas optimalizálása</a></li>
</ul>
<h2 id="See_also" name="See_also">Lásd még</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Canvas téma oldal</a></li>
  <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en-US/docs/Drawing_Graphics_with_Canvas">Rajzok készítése Canvas elemmel</a></li>
  <li><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Canvas példák</a></li>
  <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 ismertető</a></li>
  <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="/en-US/docs/Drawing_text_using_a_canvas">Szöveg rajzolása Canvas használatával</a></li>
  <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="en-US/docs/Adding Text to Canvas">Szöveg hozzáadása a Canvas elemhez</a></li>
  <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas demók - Játékok, alkalmazások, eszközök és ismertetők</a></li>
  <li><a class="link-https" href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Canvas rajzoló eszköz</a></li>
  <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas animáció alkalmazás</a></li>
  <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interaktív canvas ismertető</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 Cheat Sheet minden attribútummal és metódussal</a></li>
  <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustratorból Canvas bővítmény</a></li>
  <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas ismertetők</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">Hogyan rajzoljunk pontot a Canvas API-val</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">Hogyan rajzoljunk N fokú Bézier-görbéket a Canvas API-val</a></li>
  <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">A canvas ismertetők 31 napja</a></li>
</ul>
<div>
  {{ Next("Canvas_tutorial/Basic_usage") }}</div>
Revert to this revision