Обучение canvas

  • Revision slug: Обучение_canvas
  • Revision title: Обучение canvas
  • Revision id: 282790
  • Created:
  • Creator: Chernetsky
  • Is current revision? Нет
  • комментировать /* Прежде, чем начать */

Revision Content

<canvas> это новый элемент HTML, который предназначен для создания графики при помощи скриптования (обычно JavaScript). Он может быть использован, к примеру, для рисования графиков, создания фото-композиций, или для создания простых (и не очень) анимаций.

<canvas> впервые был представлен фирмой Apple для Mac OS X Dashboard и позже был реализован в Safari. Браузеры, основанные на Gecko 1.8, такие, как Firefox 1.5, также поддерживают этот новый элемент. Элемент <canvas> является частью спецификации WhatWG Web applications 1.0, также известной как HTML 5.

В этой обучающей статье я попытаюсь объяснить, как использовать элемент <canvas> в ваших собственных страницах. Приведённые примеры призваны подать вам идеи использования <canvas>, и могут послужить основой создания ваших собственных реализаций.

Прежде, чем начать

Использовать <canvas> не очень сложно, но вам необходимо базовое понимание HTML и JavaScript.

Как сказано выше, элемент <canvas> не поддерживается всеми современными браузерами, поэтому, чтобы увидеть все примеры в действии, вам понадобится Firefox 1.5, или другой современный браузер, основанный на Gecko, Opera 9, либо текущая версия Safari.

В этой статье

Смотри также

{{template.Next("Canvas tutorial:Basic usage")}}

{{ wiki.languages( { "en": "en/Canvas_tutorial", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}

Revision Source

<p>
<img align="right" src="File:ru/Media_Gallery/Canvas_tut_examples.jpg"><b><code><a href="ru/HTML/Canvas">&lt;canvas&gt;</a></code></b> это новый элемент <a href="ru/HTML">HTML</a>, который предназначен для создания графики при помощи скриптования (обычно <a href="ru/JavaScript">JavaScript</a>). Он может быть использован, к примеру, для рисования графиков, создания фото-композиций, или для создания простых (<a href="ru/A_Basic_RayCaster">и не очень</a>) анимаций.
</p><p><code>&lt;canvas&gt;</code> впервые был представлен фирмой Apple для <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> и позже был реализован в Safari. Браузеры, основанные на <a href="ru/Gecko">Gecko</a> 1.8, такие, как Firefox 1.5, также поддерживают этот новый элемент. Элемент <code>&lt;canvas&gt;</code> является частью спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>, также известной как HTML 5.
</p><p>В этой обучающей статье я попытаюсь объяснить, как использовать элемент <code>&lt;canvas&gt;</code> в ваших собственных страницах. Приведённые примеры призваны подать вам идеи использования &lt;canvas&gt;, и могут послужить основой создания ваших собственных реализаций.
</p>
<h3 name=".D0.9F.D1.80.D0.B5.D0.B6.D0.B4.D0.B5.2C_.D1.87.D0.B5.D0.BC_.D0.BD.D0.B0.D1.87.D0.B0.D1.82.D1.8C"> Прежде, чем начать </h3>
<p>Использовать <code>&lt;canvas&gt;</code> не очень сложно, но вам необходимо базовое понимание <a href="ru/HTML">HTML</a> и <a href="ru/JavaScript">JavaScript</a>.
</p><p>Как сказано выше, элемент <code>&lt;canvas&gt;</code> не поддерживается всеми современными браузерами, поэтому, чтобы увидеть все примеры в действии, вам понадобится Firefox 1.5, или другой современный браузер, основанный на Gecko, Opera 9, либо текущая версия Safari.
</p>
<h3 name=".D0.92_.D1.8D.D1.82.D0.BE.D0.B9_.D1.81.D1.82.D0.B0.D1.82.D1.8C.D0.B5"> В этой статье </h3>
<ul><li> <a href="ru/Canvas_tutorial/Basic_usage">Basic usage</a>
</li><li> <a href="ru/Canvas_tutorial/Drawing_shapes">Drawing shapes</a>
</li><li> <a href="ru/Canvas_tutorial/Using_images">Using images</a>
</li><li> <a href="ru/Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a>
</li><li> <a href="ru/Canvas_tutorial/Transformations">Transformations</a>
</li><li> <a href="ru/Canvas_tutorial/Compositing">Compositing</a>
</li><li> <a href="ru/Canvas_tutorial/Basic_animations">Basic animations</a>
</li></ul>
<h3 name=".D0.A1.D0.BC.D0.BE.D1.82.D1.80.D0.B8_.D1.82.D0.B0.D0.BA.D0.B6.D0.B5"> Смотри также </h3>
<ul><li> <a href="ru/HTML/Canvas">Canvas topic page</a>
</li><li> <a href="ru/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a>
</li><li> <a href="Special:Tags?tag=Canvas_examples&amp;language=ru">Canvas examples</a>
</li></ul>
<p>{{template.Next("Canvas tutorial:Basic usage")}}
</p>{{ wiki.languages( { "en": "en/Canvas_tutorial", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}
Revert to this revision