Обучение canvas

  • Revision slug: Обучение_canvas
  • Revision title: Обучение canvas
  • Revision id: 282794
  • 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/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%9e%d1%81%d0%bd%d0%be%d0%b2%d1%8b_%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f">Основы использования</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%a0%d0%b8%d1%81%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5_%d1%84%d0%b8%d0%b3%d1%83%d1%80">Рисование фигур</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%98%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5_%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d0%b8%d0%b9">Использование изображений</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%9f%d1%80%d0%b8%d0%bc%d0%b5%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5_%d1%81%d1%82%d0%b8%d0%bb%d0%b5%d0%b9_%d0%b8_%d1%86%d0%b2%d0%b5%d1%82%d0%be%d0%b2">Применение стилей и цветов</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%a2%d1%80%d0%b0%d0%bd%d1%81%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%b8">Трансформации</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%9a%d0%be%d0%bc%d0%bf%d0%be%d0%b7%d0%b8%d1%86%d0%b8%d1%8f">Композиция</a>
</li><li> <a href="ru/%d0%9e%d0%b1%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5_canvas/%d0%9e%d1%81%d0%bd%d0%be%d0%b2%d1%8b_%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d0%b8">Основы анимации</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</a>
</li><li> <a href="ru/%d0%a0%d0%b8%d1%81%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5_%d0%bf%d1%80%d0%b8_%d0%bf%d0%be%d0%bc%d0%be%d1%89%d0%b8_canvas">Рисование при помощи canvas</a>
</li><li> <a href="Special:Tags?tag=Canvas_examples&amp;language=ru">Примеры использования</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