Canvas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Элемент <canvas>, добавленный в HTML5, предназначен для создания графики с помощью 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

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

JavaScript

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

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

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

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

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

Руководства

Canvas tutorial

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

Фрагменты кода: Canvas

Некоторые фрагменты кода, ориентированные на разработчиков, с использованием <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 визуализации данных для интернета.

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

Specification
HTML
# the-canvas-element

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canvas
height
moz-opaque
DeprecatedNon-standard
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

Смотрите также