MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 319067 of Обучение canvas

  • URL ревизии: Canvas_tutorial
  • Заголовок ревизии: Обучение canvas
  • ID ревизии: 319067
  • Создано:
  • Автор: uleming
  • Это текущая версия? Нет
  • комментировать

Содержание версии

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

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

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

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

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

Все современные браузеры  поддерживают элемент <canvas>. Так что вам подойдет любой браузер последней версии (информация с www.caniuse.com)

В этой статье

Смотри также

{{ Next("Обучение canvas:Основы") }}

{{ 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" } ) }}

Источник ревизии

<p><img align="right" height="32" src="file:///C:\Users\DEVELO~1\AppData\Local\Temp\msohtml1\01\clip_image001.gif" width="32" /><code><strong><a href="https://developer.mozilla.org/ru/docs/ru/HTML/Canvas">&lt;canvas&gt;</a></strong></code> это элемент <a href="https://developer.mozilla.org/ru/docs/ru/HTML">HTML</a> предназначеный для рисования графики при помощи скриптов (обычно <a href="https://developer.mozilla.org/ru/docs/ru/JavaScript">JavaScript</a>). Он может быть использован, к примеру, для рисования графиков, создания фото-композиций, или для создания простых (<a href="https://developer.mozilla.org/ru/docs/ru/A_Basic_RayCaster">и не очень</a>) анимаций.</p>
<p><code>&lt;canvas&gt;</code> впервые был представлен фирмой Apple для <a href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> и позже был реализован в Safari и Google Chrome. Элемент <code>&lt;canvas&gt;</code> является частью спецификации <a 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>Прежде, чем начать</h3>
<p>Использовать <code>&lt;canvas&gt;</code> не очень сложно, но вам необходимо базовое понимание <a href="https://developer.mozilla.org/ru/docs/ru/HTML">HTML</a> и <a href="https://developer.mozilla.org/ru/docs/ru/JavaScript">JavaScript</a>.</p>
<p>Все современные браузеры&nbsp; поддерживают элемент <code>&lt;canvas&gt;</code>. Так что вам подойдет любой браузер последней версии (информация с www.caniuse.com)</p>
<h3>В этой статье</h3>
<ul>
  <li><a href="https://developer.mozilla.org/ru/docs/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">Основы</a></li>
  <li><a href="https://developer.mozilla.org/ru/docs/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="https://developer.mozilla.org/ru/docs/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%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%be%d0%ba">Использование картинок</a></li>
  <li><a href="https://developer.mozilla.org/ru/docs/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="https://developer.mozilla.org/ru/docs/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="https://developer.mozilla.org/ru/docs/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="https://developer.mozilla.org/ru/docs/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>
  <li><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas">Оптимизация canvas</a></li>
</ul>
<h3>Смотри также</h3>
<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Страница посвященная canvas</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en-US/docs/Drawing_Graphics_with_Canvas">Рисование графики с помощью Canvas</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Примеры Canvas</a></li>
  <li><a href="http://html5tutorial.com" title="http://html5tutorial.com">Учебник HTML5</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas" title="/en-US/docs/Drawing_text_using_a_canvas">Рисование текста с использованием Canvas</a></li>
  <li><a 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">Добавление текста к Canvas</a></li>
  <li><a href="http://www.canvasdemos.com/" title="Canvas Demos">Демо с Canvas - игры, приложения, инструменты, и учебники</a></li>
  <li><a href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Инструмент рисования Canvas</a></li>
  <li><a href="http://canvimation.github.com/" title="http://canvimation.github.com/">Анимированное приложение на Canvas</a></li>
  <li><a href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Интерактивный учебник Canvas</a></li>
  <li><a 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 with all attributes and methods</a></li>
  <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Плагин к Adobe Illustrator для преобразования в Canvas</a></li>
  <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">Учебники HTML5Canvas</a></li>
  <li><a 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">Как нарисовать точку с помощью Canvas API</a></li>
  <li><a 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">Как нарисовать кривую Безье степени N с помощью Canvas API</a></li>
  <li><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">Учебник "Освой canvas за 31 день"</a></li>
</ul>
<p>{{ Next("Обучение canvas:Основы") }}</p>
<p>{{ 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" } ) }}</p>
Вернуть эту версию