Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 803005 of Canvas

  • URL ревизии: Web/HTML/Canvas
  • Заголовок ревизии: Canvas
  • ID ревизии: 803005
  • Создано:
  • Автор: 3bl3gamer
  • Это текущая ревизия? Нет
  • Комментарий
Метки: 

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

Элемент {{HTMLElement("canvas")}} – это HTML-элемент, который может использоваться для рисования графики с помощью скриптов (обычно это JavaScript). Например, он может использоваться для рисования графиков, создания фотокомпозиций, создавания анимаций или даже обработки видео в реальном времени.

Приложения от Mozilla поддерживают <canvas> начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был внедрен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas> начиная с 9 версии и новее; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>. Более подробно можно узнать на can i use.

Элемент <canvas> также используется технологией WebGL чтобы аппаратно ускорять 3D графику на вебстраницах.

Документация

Спецификация
Элемент <canvas> часть спецификации WhatWG Web applications 1.0, также известной как HTML 5.
Учебник Canvas
Учебник по <canvas>, описывающий базовый материал и более сложные вещи.
Примеры кода:Canvas
Здесь приводится код для разработчиков, которые работают с canvas.
Примеры Canvas
Несколько демо с <canvas>.
Рисование объектов DOM в canvas
Как рисовать содержимое DOM, т.е. элементы HTML в canvas.
Простой рейкастинг
Демо с анимацией трассировки лучей и использованием canvas.
Интерфейс DOM Canvas
Canvas DOM интерфейс на Gecko.

Смотреть все...

СООБЩЕСТВО

Ресурсы

Библиотеки

  • libCanvas это легкий но тем не менее очень функциональный фреймворк canvas
  • Processing.js это порт языка визуализации Processing
  • EaselJS это библиотека с API похожим на Flash
  • PlotKit это библиотека для создания чартов и графики
  • Rekapi это API Canvas для создания аникации на кейфреймах
  • PhiloGL это фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования.
  • JavaScript InfoVis Toolkit создает интерактивную 2D Canvas визуализацию данных для Web.
  • Frame-Engine это фреймворк для разработки приложений и игр.
{{HTML5ArticleTOC()}}

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

<p>Элемент {{HTMLElement("canvas")}} –&nbsp;это <a href="/en-US/docs/HTML" title="HTML">HTML</a>-элемент, который может использоваться для рисования графики с помощью скриптов (обычно это <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Например, он может использоваться для рисования графиков, создания&nbsp;фотокомпозиций, создавания&nbsp;анимаций&nbsp;или даже обработки&nbsp;видео в реальном&nbsp;времени.</p>

<p>Приложения от Mozilla поддерживают <code>&lt;canvas&gt;</code> начиная с Gecko 1.8 (т.е. <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">с Firefox 1.5</a>). Этот элемент первоначально был внедрен Apple для OS X <a class="external" href="https://www.apple.com/macosx/features/dashboard/">Dashboard</a> и Safari. Internet Explorer поддерживает<code> &lt;canvas&gt;</code> начиная с 9 версии и новее; для более ранних версий IE&nbsp;поддержку для &lt;canvas&gt; можно добавить с помощью скрипта из проекта Google's <a class="external" href="https://excanvas.sourceforge.net/">Explorer Canvas</a>. Google Chrome и Opera 9 также поддерживают <code>&lt;canvas&gt;</code>. Более подробно можно узнать на <a href="https://caniuse.com/canvas" title="https://caniuse.com/canvas">can i use</a>.</p>

<p>Элемент <code>&lt;canvas&gt;</code> также используется технологией <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> чтобы аппаратно ускорять 3D графику на вебстраницах.</p>

<table class="topicpage-table">
 <tbody>
  <tr>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>

    <dl>
     <dt><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element">Спецификация</a></dt>
     <dd>Элемент <code>&lt;canvas&gt;</code> часть спецификации WhatWG Web applications 1.0, также известной как HTML 5.</dd>
     <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Учебник Canvas</a></dt>
     <dd>Учебник по &lt;canvas&gt;, описывающий базовый материал и более сложные вещи.</dd>
     <dt><a href="/en-US/docs/Code_snippets/Canvas" title="Code_snippets/Canvas">Примеры кода:Canvas</a></dt>
     <dd>Здесь приводится код для разработчиков, которые работают с canvas.</dd>
     <dt><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Примеры Canvas</a></dt>
     <dd>Несколько демо с <code>&lt;canvas&gt;</code>.</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 в canvas</a></dt>
     <dd>Как рисовать содержимое DOM, т.е. элементы HTML в canvas.</dd>
     <dt><a href="/en-US/docs/A_Basic_RayCaster" title="A Basic RayCaster">Простой рейкастинг</a></dt>
     <dd>Демо с анимацией трассировки лучей и использованием canvas.</dd>
     <dt><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">Интерфейс </a><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces">DOM</a><a href="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces" title="/en-US/docs/Gecko_DOM_Reference#Canvas_interfaces"> Canvas</a></dt>
     <dd>Canvas DOM интерфейс на Gecko.</dd>
    </dl>

    <p><span class="alllinks"><a href="/en-US/docs/tag/HTML:Canvas" title="/en-US/docs/tag/HTML:Canvas">Смотреть все...</a></span></p>
   </td>
   <td>
    <h2 class="Community" id=".D0.A1.D0.9E.D0.9E.D0.91.D0.A9.D0.95.D0.A1.D0.A2.D0.92.D0.9E">СООБЩЕСТВО</h2>

    <ul>
     <li>* Смотри форумы Mozilla ... {{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}</li>
     <li><a class="external" href="https://groups.yahoo.com/group/canvas-developers/">Canvas-Developers на Yahoo Group</a></li>
    </ul>

    <h2 class="Resources" id="Resources" name="Resources">Ресурсы</h2>

    <ul>
     <li><a class="external" href="https://joshondesign.com/p/books/canvasdeepdive/title.html" title="https://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">HTML5 Canvas Deep Dive</a></li>
     <li><a class="external" href="https://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="https://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Шпаргалки Canvas&nbsp;</a> (<a href="https://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png" title="HTML5_Canvas_Cheat_Sheet.png (1388×1027)">PNG</a> / <a href="https://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf" title="https://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf">PDF</a>)</li>
    </ul>

    <h2 class="Libraries" id="Libraries" name="Libraries">Библиотеки</h2>

    <ul>
     <li><a class="external" href="https://libcanvas.github.com/" title="https://libcanvas.github.com/">libCanvas</a> это легкий но тем не менее очень функциональный фреймворк canvas</li>
     <li><a class="external" href="https://processingjs.org" title="https://processingjs.org/">Processing.js</a> это порт языка визуализации Processing</li>
     <li><a class="external" href="https://easeljs.com/" title="https://easeljs.com/">EaselJS</a> это библиотека с API похожим на Flash</li>
     <li><a class="external" href="https://www.liquidx.net/plotkit/" title="https://www.liquidx.net/plotkit/">PlotKit</a> это библиотека для создания чартов и графики</li>
     <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi" title="https://github.com/jeremyckahn/rekapi">Rekapi</a> это API Canvas для создания аникации на кейфреймах</li>
     <li><a class="external" href="https://senchalabs.github.com/philogl/" title="https://senchalabs.github.com/philogl/">PhiloGL</a> это фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования.</li>
     <li><a class="external" href="https://thejit.org/" title="https://thejit.org/">JavaScript InfoVis Toolkit</a> создает интерактивную 2D Canvas визуализацию данных для Web.</li>
     <li><a href="https://www.frame-engine.com" title="https://www.frame-engine.com">Frame-Engine</a> это фреймворк для разработки приложений и игр.</li>
    </ul>

    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Похожие тематика</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>
   </td>
  </tr>
 </tbody>
</table>

<div>{{HTML5ArticleTOC()}}</div>
Вернуть эту версию