HTML5. Работа с Canvas

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

Работать с цветом и толщиной линий можно при помощи свойств объекта 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. Пример работы с цветами холста

Более детально работа с цветами и прозрачностью рассмотрена в рамках практического занятия №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, который автоматически соединит текущее положение пера с начальным