Canvas (HTML)

Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптования, обычно на языке JavaScript. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока. Размер пространства координат не обязательно отражает размер фактической отображаемой площади. По умолчанию его ширина равна тремстам пикселям, а высота ста пятидесяти.

Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.

Используется в WebGL для аппаратного ускорения 3D графики.

Компанией Google была выпущена JavaScript библиотека explorercanvas, которая позволяла работать с Canvas в браузерах IE7 и IE8.

Canvas может усложнить задачу роботам по распознаванию Капчи. При использовании canvas с сервера загружается не картинка, а набор точек (или алгоритм прорисовки), по которым браузер прорисовывает картинку (капчу).

История

Впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari.

Ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript, под названием ExplorerCanvas.

На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в браузерах. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений.

Организация Mozilla Foundation ведёт проект под названием Canvas 3D, целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML-элемент canvas. Наряду с этим существуют библиотеки, реализующие работу с трехмерными моделями, среди них three.

Поддержка

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
9.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+

Возможности

canvas позволяет разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент. Добавление теней похожих на свойства css3 box-shadow и text-shadow. И, наконец, отрисовка фигур с помощью указания контрольных точек. Причём можно изменять как ширину линий, так и кисть рисовки линий, стиль соединений линий.

API

Ниже приводится полная документация в формате таблицы с методами или параметрами слева и описанием справа.

Большинство библиотек использует API SVGMatrix объектов, а не этот, который остаётся, главным образом, по историческим причинам.

Параметры canvas

Параметры canvas

Метод / параметр	Описание	Пример
.width [ = value ]	Возвращает ширину холста в пикселях	Шаблон:Код
.height [ = value ]	Возвращает высоту холста в пикселях	Шаблон:Код

Получение canvas

Получение canvas

Метод / параметр	Описание	Пример
.getContext('2d')	Вернёт объект двумерного контекста. 'webgl' вернёт объект WebGLRenderingContext	Шаблон:Код
.probablySupportsContext( contextId )	Если .getContext() был вызван вернет false, true в противном случае	Шаблон:Код
.setContext( context )	Устанавливает контекст канвы	Шаблон:Код
.transferControlToProxy()	Вернёт объект, позволяющий передать управление другому документу. Выдаст исключение, если использовались .getContext() и .setContext()	Шаблон:Код

Работа с context

Работа с context

Метод / параметр	Описание	Пример
.canvas()	Вернет canvas, если контекст был получен через getContext()	Шаблон:Код
.commit()	Отображает кадр из буфера	Шаблон:Код
.save()	Сохраняет текущие настройки в стек	Шаблон:Код
.restore()	Достает из стека настройки отображения канвы	Шаблон:Код
.lineWidth [ = value ]	Возвращает текущую ширину линии	Шаблон:Код
.lineCap [ = value ]	Возвращает тип начертательного пера	Шаблон:Код
.lineJoin [ = value ]	Возвращает строку со стилем	Шаблон:Код
.miterLimit [ = value ]	Толщина соединения линий	Шаблон:Код
.setLineDash( template )	Устанавливает шаблон штрихов линии	Шаблон:Код
.getLineDash()	Возвращает установленный шаблон штрихов линии	Шаблон:Код
.lineDashOffset [ = value ]	Возвращает отступ от линии	Шаблон:Код

Работа со шрифтом

Работа со шрифтом

Метод / параметр	Описание	Пример
.font [ = value ]	Возвращает настройки шрифта, аналогично CSS правилу	Шаблон:Код
.textAlign [ = value ]	Возвращает выравнивание текста	Шаблон:Код
.textBaseline [ = value ]	Возвращает настройки базовой линии	Шаблон:Код
.direction [ = value ]	Возвращает текущее направление текста	Шаблон:Код
.fillText()	Рисует закрашенный текст	Шаблон:Код
.strokeText()	Рисует контур текста	Шаблон:Код
.addText(text, styles, transform, x, y [, maxWidth ])	Рисует указанный текст	Шаблон:Код
.addPathByStrokingText(text, styles, transform, x, y [, maxWidth ])	Рисует указанный текст	Шаблон:Код

Отрисовка фигур

Отрисовка фигур

Метод / параметр	Описание	Пример
.moveTo( x, y )	Перемещает точку в указанное место	Шаблон:Код
.beginPath()	Начать строить фигуру	Шаблон:Код
.closePath()	Замкуть контур фигуры	Шаблон:Код
.lineTo( x, y )	Связывает две точки между собой	Шаблон:Код
.rect( x, y, width, height )	Рисует прямоугольник	Шаблон:Код
.arc( x, y, radius, startAngle, endAngle [, anticlockwise ] )	Рисует окружность	Шаблон:Код
.quadraticCurveTo( cpx, cpy, x, y )	Кривая Безье по двум точкам	Шаблон:Код
.ellipse( x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise] )	Рисует эллипс	Шаблон:Код
.BezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y )	Создает кривую Безье по трем точкам	Шаблон:Код
.ArcTo(x1, y1, x2, y2, radiusX [, radiusY, rotation ])	Рисует дуги по контрольным точкам	Шаблон:Код
.fillStyle [ = value ]	Указывает стиль заливки контура фигуры	Шаблон:Код
.strokeStyle [ = value ]	Указывает стиль контура фигуры	Шаблон:Код
.clearRect( x, y, width, height )	Очищает прямоугольник (делает белым)	Шаблон:Код
.fillRect()	Рисует закрашенный прямоугольник	Шаблон:Код
.strokeRect()	Рисует контур прямоугольника	Шаблон:Код
.fill()	Закрасить все фигуры	Шаблон:Код
.stroke()	Обвести все фигуры	Шаблон:Код
.drawImage( img, x, y, width, height [, scaleWidth, scaleHeight] )	Нарисовать изображение	Шаблон:Код

Пути

Пути

Метод / параметр	Описание	Пример
.addPath( path, transform )	Добавляет объект Path указанный в аргументе	Шаблон:Код
.addPathByStrokingPath( path, styles, transform )	Добавляет объект Path указанный в аргументе с возможностью указание стиля отрисовки	Шаблон:Код
.currentTransform [ = value ]	Возвращает SVG-образную матрицу трансформации	Шаблон:Код
.translate( x, y )	Сдвигает изображение	Шаблон:Код
.setTransform( a, b, c, d, e, f )	Изменяет изображение	Шаблон:Код
.addColorStop( offset, color )	Добавляет конечный цвет заливки градиента с указанием смещения от начала	Шаблон:Код
.createLinearGradient( x0, y0, x1, y1 )	Cоздает объект линейного градиента	Шаблон:Код
.createRadialGradient( x0, y0, r0, x1, y1, r1 )	Cоздает объект кругового градиента	Шаблон:Код
.createPattern()	Cоздает объект шаблона	Шаблон:Код
.setTransform()	Устанавливает трансформацию	Шаблон:Код

Метрики

Метрики

Метод / параметр	Описание	Пример
.measureText()	Возвращает объект с метриками текста	Шаблон:Код
.actualBoundingBoxLeft()	Вернет горизонтальную координату левой стороны прямоугольника занимаемого текстом	Шаблон:Код
.actualBoundingBoxRight()	Вернет горизонтальную координату правой стороны прямоугольника занимаемого текстом	Шаблон:Код
.fontBoundingBoxAscent()	Расстояние от горизонтальной линии (TextBaseline), до вершины прямоугольника ограничивающего текст	Шаблон:Код
.fontBoundingBoxDescent()	Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст	Шаблон:Код
.actualBoundingBoxAscent()	Расстояние от горизонтальной линии (TextBaseline), до вершины прямоугольника ограничивающего текст	Шаблон:Код
.actualBoundingBoxDescent()	Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст	Шаблон:Код
.emHeightAscent()	Расстояние от горизонтальной линии (TextBaseline), до верха прямоугольника ограничивающего текст в em единицах измерения.	Шаблон:Код
.emHeightDescent()	Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст в em единицах измерения.	Шаблон:Код
.hangingBaseline()	Расстояние от горизонтальной линии (TextBaseline), до хэндинг базовой линии текста в em единицах измерения.	Шаблон:Код
.alphabeticBaseline()	Расстояние от горизонтальной линии (TextBaseline), до алфавитной базовой линии текста в em единицах измерения.	Шаблон:Код
.ideographicBaseline()	Расстояние от горизонтальной линии (TextBaseline), до идеографической базовой линии текста в em единицах измерения.	Шаблон:Код
.drawSystemFocusRing( [ path, ] element )	Если данный элемент ориентирован, рисует кольцо фокусировки вокруг текущего пути по умолчанию или заданный путь, следуя конвенций платформы для фокус-колец.	Шаблон:Код
.drawCustomFocusRing( [ path, ] element )		Шаблон:Код
.scrollPathIntoView()	Позволяет управлять прокруткой	Шаблон:Код
.clip()	Ограничивает область отсечения	Шаблон:Код
.resetClip()	Деконстатировать область отсечения	Шаблон:Код
.isPointInPath()	Возвращает истину, если данная точка находится в текущем пути по умолчанию или заданного пути	Шаблон:Код
.isPointInStroke()	Возвращает истину, если данная точка будет в регионе, охваченном инсульта текущего пути по умолчанию или заданный путь, учитывая текущий стиль инсульт.	Шаблон:Код
.addHitRegion()	Добавляет область хит для растрового изображения.Аргументом является объект.	Шаблон:Код
fillRule	Правило заполнения для использования при определении, какие пиксели находятся внутри пути.	Шаблон:Код
id	id canvas	Шаблон:Код
parentID	Идентификатор родительского области, для целей навигации по доступности инструментов и для курсора запасного варианта.	Шаблон:Код
cursor		Шаблон:Код
control		Шаблон:Код
label	Добавляет label для региона	Шаблон:Код
role		Шаблон:Код
.removeHitRegion()		Шаблон:Код

Пиксельные манипуляции

Пиксельные манипуляции

Метод / параметр	Описание	Пример
createImageData		Шаблон:Код
createImageDataHD		Шаблон:Код
GetImageData		Шаблон:Код
GetImageDataHD		Шаблон:Код
— .width		Шаблон:Код
— .height		Шаблон:Код
— .resolution		Шаблон:Код
— .data		Шаблон:Код
.putImageData()		Шаблон:Код
.putImageDataHD()		Шаблон:Код
.globalAlpha()		Шаблон:Код
.globalCompositeOperation()		Шаблон:Код
.imageSmoothingEnabled()		Шаблон:Код

Работа с тенями

Работа с тенями

Метод / параметр	Описание	Пример
.shadowColor()		Шаблон:Код
.shadowOffsetX()		Шаблон:Код
.shadowOffsetY()		Шаблон:Код
.shadowBlur()		Шаблон:Код
window.screen.canvasResolution		Шаблон:Код
toDataURL		Шаблон:Код
toDataURLHD		Шаблон:Код
getImageData		Шаблон:Код

Трансформация изображения

Трансформация изображения

Метод / параметр	Описание	Пример
.scale( x, y )	Искажает изображение увеличивая её на указанные x, y	Шаблон:Код
.rotate( angle )	Поворачивает изображение	Шаблон:Код
.transform( a, b, c, d, e, f )	Трансформирует изображение	Шаблон:Код
.resetTransform()	Обнуляет настройки искажений	Шаблон:Код

Особенности

• Изменение высоты или ширины холста сотрет всё его содержимое и все настройки, проще говоря он создастся заново;
• Начало отсчёта (точка 0,0) находится в левом верхнем углу. Но её можно сдвигать;
• 3D контекста нет, есть отдельные разработки, но они не стандартизованы;
• Цвет текста можно указывать аналогично CSS, впрочем, как и размер шрифта.

Примеры или паттерны оптимизации

В случае, если вам нет необходимости перерисовывать холст, но нужно производить манипуляции с ним, то вы можете «сфотографировать» весь холст и сохранить в переменную. И работать уже с этим рисунком, не заставляя канву отрисовываться после каждой манипуляции.

Если обновляться должно не всё изображение, а только его часть, то вы можете стирать определенную зону на холсте и рисовать её заново.

Браузеры могут оптимизировать анимации, идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведёт к повышению точности анимации. Например анимации на JavaScript, синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведёт к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах. Для этого используйте requestAnimationFrame.

Все текущие браузеры имеют фильтр размытия изображения при его увеличении. Его стоит использовать, если вы часто попиксельно обрабатываете картинку. Путем уменьшения картинки, например, в два раза и последующего аппаратного увеличения её с помощью фильтра.

Если игра позволяет отдельно обрабатывать фон и элементы игры, то имеет смысл сделать два холста друг над другом.

Для очистки канвы лучшим средством будет использование clearRect, однако, если очищать только необходимые участки, то скорость возрастет ещё больше.

Критика

• Нагружает процессор и оперативную память;
• Из-за ограничения сборщика мусора, нет возможности очистить память;
• Необходимо самому обрабатывать события с объектами;
• Плохая производительность при большом разрешении;
• Приходится вырисовывать отдельно каждый элемент.

Преимущества

• В отличии от SVG гораздо удобнее иметь дело с большим числом элементов;
• Имеет аппаратное ускорение;
• Можно манипулировать каждым пикселем;
• Можно применять фильтры обработки изображений;
• Есть много библиотек.

Использование

Использование и операции с элементом возможны только через JavaScript.

<!doctype html>
<html lang="ru">
  <head>
    <title>canvas</title>
    <script src="example.js"></script>
  </head>
  <body>
    <canvas id="canvas">Этот элемент не поддерживается</canvas>
  </body>
</html>

Файл example.js

function onLoadHandler() {
  var canvas  = document.getElementById('canvas'),
      context = canvas.getContext('2d');
  /*
    Далее какие-либо действия над холстом
  */
}
window.onload = onLoadHandler;

Примеры

Использование JavaScript для рисования окружности

<html lang="ru">
  <head>
    <title>circle</title>
  </head>
  <body>
    <canvas id="example">Обновите браузер</canvas>
    <script>
      var canvas  = document.getElementById('example'),
          context = canvas.getContext('2d');
      function drawCircle(x, y, r) {
        context.arc(x, y, r, 0, 2 * Math.PI, false);
      }
      context.beginPath();
      drawCircle(150, 75, 50);
      context.lineWidth   = 15;
      context.strokeStyle = '#0f0';
      context.stroke();
    </script>
  </body>
</html>

Отрисовка на canvas обдуваемого дерева Пифагора

<html> 
  <head>
    <title>Дерево Пифагора</title>
    <script type="text/javascript">
      // функция рисует под углом angle линию из указанной точки длиной ln
      function drawLine(x, y, ln, angle) {
        context.moveTo(x, y);
        context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
      }
      // Функция рисует дерево
      function drawTree(x, y, ln, minLn, angle) {
        if (ln > minLn) {
          ln = ln * 0.75;
          drawLine(x, y, ln, angle);
          x = Math.round(x + ln * Math.cos(angle));
          y = Math.round(y - ln * Math.sin(angle));
          drawTree(x, y, ln, minLn, angle + Math.PI / 4);
          drawTree(x, y, ln, minLn, angle - Math.PI / 6);
          // если поставить угол Math.PI/4 , то выйдет классическое дерево
        }
      }
      // Инициализация переменных
      function init() {
        var canvas  = document.getElementById("tree"),
            x       = 100 + (canvas.width / 2),
            y       = 170 + canvas.height,  // положении ствола
            ln      = 120,                  // начальная длина линии
            minLn   = 5;                    // минимальная длина линии
        canvas.width  = 480; // Ширина холста
        canvas.height = 320; // высота холста 
        context             = canvas.getContext('2d');
        context.fillStyle   = '#ddf'; // цвет фона
        context.strokeStyle = '#020'; //цвет линий
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.lineWidth = 2; // ширина линий
        context.beginPath();
        drawTree(x, y, ln, minLn, Math.PI / 2);
        context.stroke();
      }
 
      window.onload = init;
    </script>
  </head>
  <body>
    <canvas id="tree"></canvas>
  </body> 
</html>

Библиотеки

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

Ссылки

Примеры работы

• HDR Моделирование Проверено 27 августа 2014
• 3D Walker  (неопр.). Дата обращения: 14 октября 2013.
• Racing 3D  (неопр.). Дата обращения: 14 октября 2013.
• Интерактивная игра  (неопр.). Дата обращения: 14 октября 2013.
• Коллекция примеров  (неопр.). Дата обращения: 14 октября 2013.
• Карта московского метро  (неопр.). Дата обращения: 2 ноября 2013.
• Карта звездного неба  (неопр.). Дата обращения: 2 ноября 2013.

Для ознакомления

• HTML5 Canvas  (неопр.). Дата обращения: 31 октября 2013.
• MDN  (неопр.). Дата обращения: 31 октября 2013.
• Living Standard  (неопр.). Дата обращения: 31 октября 2013.
• Android canvas  (неопр.). Дата обращения: 31 октября 2013.
• Оптимизация работы элемента canvas в HTML5  (неопр.). Дата обращения: 31 октября 2013.
• diveintohtml5  (неопр.). Дата обращения: 31 октября 2013.
• Основы canvas  (неопр.). Дата обращения: 31 октября 2013.
• HTML5 fundamentals, Part 4: The final touch  (неопр.). Дата обращения: 31 октября 2013.
• Шпаргалка по Canvas  (неопр.). Дата обращения: 31 октября 2013.