Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Canvas

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Добавленный в HTML5<canvas> – это элемент для рисования графики с помощью JavaScript. Например, он может использоваться для рисования графиков, создания фотокомпозиций и анимаций или даже обработки видео в реальном времени.

Canvas - в перевод с английского означает холст.

Приложения от 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>.

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

Пример

Это простой пример кода, который использует данный CanvasRenderingContext2D.fillRect() метод.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Отредактируйте ниже в поле код, чтобы увидеть результат на холсте.

Справочные материалы

Интерфейсы, связанные с WebGLRenderingContext ссылаются под WebGL.

Руководства

Canvas tutorial
Подробный учебник как для начинающих пользователей так и для продвинутых.
Code snippets: Canvas
Некоторые расширения разработчик-ориентированый фрагменты кода canvas.
Demo: A basic ray-caster
Демо анимации трассировки-лучей используя canvas.
Drawing DOM objects into a canvas
Как рисовать DOM контент, таких как HTML элементы, в canvas.
Manipulating video using canvas
Объединяет <video> и <canvas> для манипулирования видео данных в реальном времени.

Ресурсы

Основное

Библиотеки

  • Fabric.js это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.
  • Kinetic.js это canvas библиотека с открытым исходным кодом сосредаточенная на интерактивности для настольных и мобильных приложений.
  • Paper.js это программируемые фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.
  • libCanvas это мощный и лёгкий canvas фреймворк.
  • Processing.js является портом языка обработки визуализации.
  • PlayCanvas это игровой движок с открытым исходным кодом.
  • Pixi.js это игровой движок с открытым исходным кодом.
  • PlotKit создание графиков и графическая библиотека.
  • Rekapi это API анимации для canvas.
  • PhiloGL это WebGL фреймворк для визуализации данных, креативное кодирование и разработка игр.
  • JavaScript InfoVis Toolkit создаёт интерактивный 2D Canvas визуализация данных для Web.

Спецификации

Specification Status Comment
WHATWG HTML Living Standard
Определение 'Canvas' в этой спецификации.
Живой стандарт  

См.также

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: uleming, MuradAz, askolt, fscholz, 3bl3gamer, Neir, teoli
 Обновлялась последний раз: uleming,