Canvas (HTML)

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

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

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

Компанией Google была выпущена JavaScript-библиотека explorercanvas Архивировано 11 февраля 2013 года., которая позволяла работать с 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 Архивная копия от 9 мая 2017 на Wayback Machine.

Поддержка

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

Возможности

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

Особенности

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

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

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

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

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

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

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

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

Критика

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

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

• В отличие от 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

  var canvas  = document.getElementById('canvas'),
      context = canvas.getContext('2d');
function onLoadHandler() {
  /*
    Далее какие-либо действия над холстом
  */
}
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 — фреймворк для разработки приложений и игр.

См. также

• HTML5
• JavaScript

Ссылки

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

• 3D Walker  (неопр.). Дата обращения: 14 октября 2013. Архивировано 27 сентября 2013 года.
• Racing 3D  (неопр.). Дата обращения: 14 октября 2013. Архивировано 14 февраля 2009 года.
• Интерактивная игра  (неопр.). Дата обращения: 14 октября 2013. Архивировано 5 октября 2013 года.
• Карта московского метро  (неопр.). Дата обращения: 14 февраля 2022. Архивировано 14 февраля 2022 года.
• Карта звёздного неба  (неопр.). Дата обращения: 2 ноября 2013. Архивировано из оригинала 5 августа 2014 года.
• Строительные калькуляторы с чертежами.

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

• <canvas> — справочник по HTML. Дата обращения: 30 августа 2023.

• HTML5 Canvas  (неопр.). Дата обращения: 31 октября 2013. Архивировано 31 октября 2013 года.
• MDN  (неопр.). Дата обращения: 31 октября 2013. Архивировано 6 ноября 2013 года.
• Living Standard  (неопр.). Дата обращения: 31 октября 2013. Архивировано 27 апреля 2009 года.
• Спецификация Canvas 2D Context, перевод на русский  (неопр.). Дата обращения: 28 мая 2016. Архивировано 17 июня 2016 года.
• Android canvas  (неопр.). Дата обращения: 31 октября 2013. Архивировано 2 ноября 2013 года.
• Оптимизация работы элемента canvas в HTML5  (неопр.). Дата обращения: 31 октября 2013. Архивировано 4 ноября 2013 года.
• diveintohtml5  (неопр.). Дата обращения: 31 октября 2013. Архивировано 29 октября 2013 года.
• Основы canvas  (неопр.). Дата обращения: 31 октября 2013. Архивировано 4 ноября 2013 года.
• HTML5 fundamentals, Part 4: The final touch  (неопр.). Дата обращения: 31 октября 2013. Архивировано 3 ноября 2013 года.