HTML5. Работа с Canvas

Показывать лекцию целиком

Рисование на холсте осуществляется при помощи вызова функций и методов веб – сценариев. Рассмотрим способы формирования различных изображений.

Добавление элемента canvas на страницу

Как мы уже отмечали, достаточно прописать в HTML – коде следующее, чтобы разместить холст на странице:

<canvas height="200" width="200"></canvas>

В случае, если значения ширины и высоты холста задаются в таблице стилей, то и размещаемое на холсте изображение будет автоматически масштабироваться соответствующим образом.

Для упрощения работы добавим рамку, окружающую холст и зададим атрибут id.

<canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>

В браузере наш холст будет отображен следующим образом:

(рис 23.1) Холст с рамкой

Рисование простейших фигур

Прямоугольники

Для отрисовки прямоугольных фигур используются методы strokeRect для прямоугольника без заливки цветом, и fillRect для прямоугольника залитого цветом.

Для иллюстрации примеров лекции, создадим HTML – файл, для простоты разместим JavaScript код в рамках самой страницы:

<html>
 <head>
  <script type="application/x-javascript">
    function createImage() 
    {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    }
  </script>
    
    
 </head>
 <body onload="createImage();">
   <canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas>
 </body>
</html>

Функция createImage вызывается при загрузке тела html – документа. В рамках самой функции мы получаем ссылку на сам холст (canvas) и ссылку на контекст (ctx).

Рассмотрим подробнее метод и его параметры:

 strokeRect (x,y,w,h)

x и y – координаты верхней левой вершины прямоугольника (по горизонтали и вертикали соответственно);

w и h – ширина и высота прямоугольника соответственно.

Метод fillRect принимает те же параметры, что и strokeRect.

Изменим функцию createImage следующим образом, для отрисовки двух квадратов:

function createImage() 
    {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeRect(20,20,50,50);
    ctx.fillRect(80, 80, 50, 50);
     }

В результате, получим холст:

(рис 23.2) Пример отрисовки прямоугольников

Метод clearRect, принимающий те же параметры, что fillRect и strokeRect, позволяет очистить прямоугольную область. Добавим следующую строку в метод createImage:

ctx.clearRect(50,50,50,50);

В результате холст изменится таким образом:

(рис 23.3) Пример очистки прямоугольной области холста

Работа с цветом и толщиной линий

Работать с цветом и толщиной линий можно при помощи свойств объекта CanvasRenderingContext2D.

Свойство strokeStyle задает цвет линий контура. Все фигуры, которые мы впоследствии нарисуем, будут иметь контур указанного цвета. Цвет задают в виде строки либо с именем цвета, либо в #RRGGBB и rgb(a) форматах.

Рассмотрим последние два формата:

rgb(r,g,b)

где

r – красная составляющая;

g – зеленая составляющая;

b – синяя соствляющая.

Все три составляющие цвета имеют вид десятичных чисел от 0 до 255.

rgba формат позволяет дополнительно задать уровень прозрачности рисуемых линий:

rgba(r,g,b,a)

a – уровень прозрачности (число от 0.0 - полностью прозрачный до 1.0 -полностью непрозрачный).

Следующие четыре выражения задают непрозрачный красный цвет линий контура:

ctx.strokeStyle = "red";

ctx.strokeStyle = "#FF0000";

ctx.strokeStyle = "rgb(255, 0, 0)";

ctx.strokeStyle = "rgba(255, 0, 0, 1)";

Цветом по умолчанию является черный.

Свойство fillStyle определяет цвет заливки, также в строковом виде и с использованием тех же форматов, что описаны ранее. Для цвета заливок действуют те же правила, что и для цвета линий. По умолчанию цвет заливок также черный.

Добавим описанные свойства работы с цветом в наш пример:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.strokeStyle = "red";
  ctx.strokeRect(20,20,50,50);
  ctx.fillStyle = "blue";
  ctx.fillRect(80, 80, 50, 50);
  ctx.clearRect(50,50,50,50);
   }

И получим следующее изображение:

(рис 23.4) Пример работы с цветами холста Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот. Это вызовет ошибку в Web-сценарии.

Более детально работа с цветами и прозрачностью рассмотрена в рамках практического занятия №9.

Свойство lineWidth задает толщину линий в пикселях в виде числа, например:

ctx.lineWidth = 20;

Работа с положением пера

Говорят, что только дети рисуют, не отрывая руки от бумаги. Нам же могут понадобиться изображения немного посложнее. Для рисования сложного контура используется концепция пера — воображаемого инструмента рисования. Перо можно перемещать в любую точку на канве. Рисование каждой линии контура начинается в точке, где в данный момент находится перо.

Изначально, сразу после загрузки Web-страницы и вывода канвы, перо находится в точке с координатами [0,0], т. е. в верхнем левом углу канвы. Переместить перо в другую точку канвы, можно методом moveTo.

Метод moveTo принимает два параметра moveTo(x,y), соответственно определяющих координаты положения пера по горизонтали и вертикали.

Выражение ctxCanvas.moveTo(10, 30) переместит перо в точку с координатами [10,30].

Рисование прямых линий

Для отрисовки прямых линий используется метод lineTo(x,y), рисующий прямую линию от координат положения пера до указанных в качестве параметров значений x и y.

После рисования прямой линии перо будет установлено в ее конечной точке. Мы можем прямо из этой точки начать рисование следующей линии контура.

Для указания начала отрисовки контура сложной фигуры используется метод beginPath, соответственно при окончании отрисовки фигуры – stroke.

Рассмотрим на следующем примере, по отрисовке пятиугольника:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(0,100); 
  ctx.lineTo(100,0); 
  ctx.lineTo(200,100); 
  ctx.lineTo(150,200); 
  ctx.lineTo(50,200); 
  ctx.lineTo(0,100); 
  ctx.stroke(); 
   }

Получим следующий результат:

(рис 23.5) Пример отрисовки контура сложной фигуры

Последнюю сторону пятиугольника можно было не отрисовывать методом lineTo, а вызвать метод closePath, который автоматически соединит текущее положение пера с начальным

Рисование дуг и кривых

Для рисования дуг используется метод arc:

arc(x, y, r, sА, eА, a)

Методу передаются

x и y - центр окружности;

r - радиус окружности;

sA - начальный угол;

eA - конечный угол;

а - направление.

Рассмотрим на следующем примере:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "black";
  ctx.stroke();

   }

В результате получим следующую дугу:

(рис 23.6) Пример отрисовки дуги

Частным случаем дуги является окружность, изменив одну строку предыдущего примера, а именно значения начального и конечного угла для метода arc (на ноль и $$2*\pi$$ соответственно), получим следующий результат:

(рис 23.7) Пример отрисовки окружности

Рисование кривых Безье

Для построения квадратичной и кубической кривых используются соответственно функции:

quadraticCurveTo (Px, Py, x, y)

bezierCurveTo (P1x, P1y, P2x, P2y, x, y)

x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубической кривой соответственно две дополнительные точки.

Следующий пример продемонстрирует отрисовку обеих кривых:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 15);
  ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
  ctx.moveTo(10, 15);
  ctx.quadraticCurveTo(100, 100, 250, 15);
  ctx.stroke();
   }

Результат можно увидеть в браузере:

(рис 23.8) Пример отрисовки кривых Безье

Работа со стилями линий

Свойство lineCap задает форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:

"butt" — начальная и конечная точки как таковые отсутствуют (значение по умолчанию);

"round" — начальная и конечная точки имеют вид кружков;

"square" — начальная и конечная точки имеют вид квадратиков.

Пример, демонстрирующий все типы конечных точек линий:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath(); 
  ctx.lineWidth = 10; 
  ctx.lineCap = "butt"; 
  ctx.moveTo(20, 20); 
  ctx.lineTo(180, 20); 
  ctx.stroke();
  ctx.beginPath();
  ctx.lineCap = "round"; 
  ctx.moveTo(20, 40); 
  ctx.lineTo(180, 40); 
  ctx.stroke();
  ctx.beginPath();
  ctx.lineCap = "square"; 
  ctx.moveTo(20, 60); 
  ctx.lineTo(180, 60); 
  ctx.stroke();
  }

Результат:

(рис 23.9) Пример стилей конечных точек линий

Свойство lineJoin задает форму точек соединения линий друг с другом. Его значение может быть одной из следующих строк:

"miter" — точки соединения имеют вид острого или тупого угла (значение по умолчанию);

"round" — точки соединения, образующие острые углы, скругляются;

"bevel" — острые углы, образуемые соединяющимися линиями, как бы срезаются.

(рис 23.10) Пример различных форм точек соединения линий А – miter; Б – round; В - bevel

Свойство miterLimit задает дистанцию, на которую могут выступать острые углы, образованные соединением линий, от точки соединения, когда для свойства lineJoin задано значение "miter". Углы, выступающие на большую дистанцию, будут срезаны.

Вывод текста

Существуют два метода и несколько свойств для вывода текста.

Метод strokeText выводит заданный текст в указанное место. Текст рисуется в виде контура, без заливки; цвет контура задается значением свойства strokeStyle:

strokeText(<выводимый текст>, x, y, w)

где

x - горизонтальная координата;

y - вертикальная координата:

w - максимальная ширина.

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

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

Метод fillText также выводит заданный текст в указанное место. Однако текст этот представляет собой одну заливку, без контура; цвет заливки задается значением свойства fillStyle.

Формат вызова этого метода такой же, как и у метода strokeText.

Свойство font позволяет задать параметры шрифта, которым будет выводиться текст. Параметры шрифта указывают в том же формате, что и у значения атрибута стиля font, виде строки:

ctx.fillStyle = "yellow"; 
ctx.font = "italic 12pt Verdana"; 
ctx.fillText("test text", 50, 100);

Свойство textAlign позволяет задать горизонтальное выравнивание выводимого текста относительно точки, в которой он будет выведен (координаты этой точки задаются вторым и третьим параметрами методов strokeText и fillText). Это свойство может принимать следующие значения:

"left" — выравнивание по левому краю;

"right" — выравнивание по правому краю;

"start" — выравнивание по левому краю, если текст выводится по направлению слева направо, и по правому краю в противном случае (значение по умолчанию);

"end" — выравнивание по правому краю, если текст выводится по направлению слева направо, и по левому краю в противном случае;

"center" — выравнивание по центру.

Свойство textBaseline позволяет задать вертикальное выравнивание выводимого текста относительно точки, в которой он будет выведен. Это свойство может принимать следующие значения:

"top" — выравнивание по верху прописных (больших) букв;

"hanging" — выравнивание по верху строчных (маленьких) букв;

"middle" — выравнивание посередине строчных букв;

"alphabetic" — выравнивание по базовой линии букв европейских алфавитов (значение по умолчанию);

"ideographic" — выравнивание по базовой линии иероглифических символов (она находится чуть ниже базовой линии букв европейских алфавитов);

"bottom" — выравнивание по низу букв.

Ключевые термины и определения

Перо - воображаемый инструмент рисования.

Краткие итоги

В заключительной лекции курса нами были рассмотрены основные методы и свойства создания изображений холста. С дополнительными возможностями холста предлагается ознакомиться самостоятельно (см. список материалов для самостоятельного изучения).

В рамках последующих практических занятий нами будет подробнее рассмотрены методы работы с элементом <canvas>.