Основы JavaScript для рисования на холсте canvas

Поле для рисования. Canvas.

Одним из самых востребованных инструментов в HTML5 является холст (тег <canvas>) — поле для рисования, которое используется для построения графиков, рисунков, анимации и создания игр в браузерах. Холст стоит обособленно от всех других тегов HTML, поскольку для работы с ним требуется JavaScript.

Элемент имеет два главных атрибута - ширину и высоту (оба они не обязательны и по умолчанию холст имеет ширину в 300 пикселей и высоту - в 150 пикселей). А также, атрибут id, необходимый для его идентификации кодом JavaScript.

Зададим поле для рисования размером 600x500 точек:

<canvas id="drawing" width="600" height="500"></canvas>

Чтобы сделать холст видимым, с помощью таблицы стилей ему можно дать цветной фон ( background: #ffe; ), рамку (border: 1px solid #000;) и задать расположение по центру окна (margin: 0 auto;):

#drawing { 
     border: 1px solid #000;
     background: #ffe;  
     display: block;
     margin: 0 auto;
}

И, непосредственно, чтобы рисовать на холсте, нужно использовать язык программирования JavaScript. Первым делом необходимо получить объект холста, для чего используется метод document.getElementById. Затем надо получить двумерный контекст рисования, для чего применяется метод getContext():

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

Итак, шаблон файла index.html, который позволяет правильно начать работать с построением графических изображений в браузере посредством связки HTML5+JavaScript, выглядит следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Холст для рисования на JS</title>
    <script type="text/javascript">
        var obj = document.getElementById('drawing');
        var ctx = obj.getContext('2d');
    </script>
    <style type="text/css">
      #drawing { 
         border: 1px solid #000;
         background: #ffe;  
         display: block;
         margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="drawing" width="600" height="500"></canvas>
  </body>
</html>

Вывод первой фигуры. Графические примитивы.

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

x, y - положение верхнего левого угла прямоугольника в canvas (относительно начала координат);
width (ширина) и height (высота) - размеры прямоугольника.

Зададим эти значения в следующие переменные:

var x = 25;
var y = 25;
var width = 100;
var height = 100;

Далее, выведем нашу фигуру, используя переменные и функцию fillRect:

ctx.fillRect(x,y,width,height); // эквивалентно ctx.fillRect(25,25,100,100);

Ниже представлен результат.

Помимо функции fillRect полезными также могут быть функции:

strokeRect(x, y, width, height) - рисование прямоугольного контура;
clearRect(x, y, width, height) - очистка прямоугольной области, делая содержимое совершенно прозрачным.

Остальные примитивные фигуры создаются контурами. Контур - это набор точек, которые, соединяясь в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур может быть закрытым.

Создание фигур, используя контуры, происходит в несколько важных шагов:

Сначала идет команда начала определения контура.
Затем, используя команды определения фигуры, задается контур, но не рисуется.
Потом команда закрытия контура, если необходимо замкнуть контур.
Созданный контур можно либо обвести, либо залить. По этой команде и происходит отрисовка фигуры.

Здесь приведены функции, которые можно использовать в описанных шагах (пп.1,3,4):

название	описание
beginPath()	Создаёт новый контур. После создания используется в дальнейшем командами рисования при построении контуров.
closePath()	Замыкает контур, добавляя прямую линию от первой точки до последней.
stroke()	Рисует фигуру с внешней обводкой, без заливки.
fill()	Рисует фигуру с заливкой внутренней области.

Для определения контура используются следующие команды (п.2):

название	описание
moveTo(x, y)	Перемещает перо в точку с координатами x и y.
lineTo(x, y)	Рисует линию с текущей позиции до позиции, определённой x и y.
arc(x, y, radius, startAngle, endAngle, anticlockwise)	Рисует дугу с центром в точке (x,y) радиусом radius, начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки).
arcTo(x1, y1, x2, y2, radius)	Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.

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

Определение цвета.

Для всех графических примитивов можно задавать цвет и заливку. По умолчанию, если ничего не указывать, фигуры рисуются черным цветом. Однако, если необходимо задать цвет фигуре, то используются следующие свойства контекста: fillStyle и strokeStyle. Перед каждым построением фигуры задаются эти свойства, после чего определяется и рисуется сама фигура.

fillStyle = color;    // цвет заливки
strokeStyle = color;  // цвет контура

Цвет можно задать следующими способам:

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

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

Помимо сплошного однородного цвета, можно использовать линейные и радиальные градиенты. Для этого необходимо сначала создать нужный градиент, а затем присвоить его свойствам fillStyle или strokeStyle. Создание градиента осуществляется следующими методами:

createLinearGradient(x1, y1, x2, y2) - создает объект линейного градиента с начальной точкой ( x1, y1) и конечной точкой ( x2, y2).
createRadialGradient(x1, y1, r1, x2, y2, r2) - создает радиальный градиент. Параметры представляют собой две окружности, одна с центром в точке ( x1, y1) и радиусом r1, а другая с центром в точке ( x2, y2) и радиусом r2.
gradient.addColorStop(position, color) - создает новую цветовую точку на gradient объекте. Это position число от 0,0 до 1,0, определяющее относительное положение цвета в градиенте, а color аргумент должен быть строкой, представляющей CSS , указывающей цвет, которого должен достичь градиент при этом смещении в переходе.

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

Использование теней включает всего четыре свойства:
shadowOffsetX = float - Указывает горизонтальное расстояние, на которое тень должна простираться от объекта. Значение по умолчанию – 0.
shadowOffsetY = float - Указывает вертикальное расстояние, на которое тень должна простираться от объекта. Значение по умолчанию – 0.
shadowBlur = float - Указывает размер эффекта размытия. Значение по умолчанию — 0.
shadowColor = color - Стандартное значение цвета CSS, указывающее цвет эффекта тени; по умолчанию он полностью прозрачный черный.
Ниже представлен пример работы с тенью.

Размещение текста.

Контекст рендеринга холста предоставляет два метода для рисования текста:

fillText(text, x, y [, maxWidth]) - вставляет заданный текст в положение (x,y). Опционально может быть указана максимальная ширина.
strokeText(text, x, y [, maxWidth]) - вставляет контур заданного текста в положение (x,y). Опционально может быть указана максимальная ширина.

Помимо свойств цвета, тени, градиента, описанных выше, для текста работает еще ряд свойств:

font = value
Это название шрифта, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство font. По умолчанию - без засечек высота 10px.

textAlign = value
Настройка выравнивания текста. Возможные значения: start, end, left, right или center. По умолчанию - start.

textBaseline = value
Настройка выравнивания текста по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию - alphabetic.

direction = value
Направление текста. Возможные значения: ltr, rtl, inherit. По умолчанию - inherit.

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

Направление:

JavaScript