Canvas (HTML)

HTML

HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

Canvas (англ. canvas — «холст») — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи JavaScript.

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

История

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

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

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

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

Возможности

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

Атрибуты

У этого элемента кроме универсальных и событийных атрибутов доступно всего два атрибута: height задает высоту холста. По умолчанию 300 пикселов. width задает ширину холста. По умолчанию 150 пикселов.

Поддержка

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

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

API

Для работы с изображениями есть две функции getImageData( x, y, width, height ) и putImageData( x, y, width, height ), первая получает содержимое канвы с условием, что вся информация с этого же сайта, вторая вставляет результат первого на холст.

Для очистки квадрата(заполнения белым цветом) и используется функция clearRect( x, y, width, height ).

Для рисования прямоугольников используют функции strokeRect( x, y, width, height ) и fillRect( x, y, width, height ), первый обводит контур, второй заливает фигуру.

Для рисования дуг использую функцию arc( x, y, radius, startAngle, endAngle, anticlockwise ),

Для начертания сложных фигур, или же просто линий, используют следующую комбинацию beginPath(), после этого расставляются точки с помощью команд moveTo( x, y ) и lineTo( x, y )(первая смещает курсор в указанную позицию, вторая перемещает курсор и ставит контрольные точки в исходной и конечной позициях). Если необходимо нарисовать другую фигуру, то вам стоит вызвать процедуру closePath() и начать с операции с начала. Для обведения или закрашивания фигуры из контрольных точек просто вызовите stroke() и fill() соответственно.

Для рисования кривых Безье есть две функции quadraticCurveTo( Px, Py, x, y ) и bezierCurveTo( P1x, P1y, P2x, P2y, x, y ), первая рисует кривую Безье второго порядка от текущей точки на холсте до указанной через промежуточную, вторая рисует чуть проще.

Чтобы изменить цвет закрашивания достаточно изменить параметр fillStyle(задавать цвета можно аналогично css). Чтоб изменить цвет обводных линий используйте strokeStyle таким же образом.

Особенности

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

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

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

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

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

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

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

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

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

Примеры

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

<html>
<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");
      var x       = 100 + (canvas.width / 2);
      var y       = 170 + canvas.height;  // положении ствола
      var ln      = 120;                  // начальная длина линии
      var 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>

Ссылки

• Онлайн редактор документов, написанный на Canvas, HTML5
• Руководство по основам использования html5 canvas
• CANVAS examples
• Canvascape — «3D Walker»
• Racing 3D
• drawastickman.com интерактивная игра
• Коллекция примеров
• Wii Opera SDK Canvas Library for Internet Gaming