Настройка окончаний линий. Свойство lineCap. 

Для настройки окончаний линий существует свойство lineCap, которое может принимать следующие значения: miter – установлено по умолчанию, линия просто заканчивается в конечной точке; round – к концу линии добавляется полукруг с диаметром равным толщине линии, square – к концу линии добавляется полуквадрат со стороной равной толщине линии. Пример: 

im_1.lineWidth = 40; 

im_1.strokeStyle = 'black'; 

im_1.lineCap = 'miter'; 

im_1.moveTo(0,30); 

im_1.lineTo(200,30); 

im_1.stroke(); 

im_1.beginPath();//Начали новый путь 

im_1.lineCap = 'round'; 

im_1.moveTo(0,80); 

im_1.lineTo(200,80); 

im_1.stroke(); 

im_1.beginPath();//Начали новый путь 

im_1.lineCap = 'square'; 

im_1.moveTo(0,130); 

im_1.lineTo(200,130); 

im_1.stroke(); 

Сопряжение толстых линий. Свойство lineJoin. 

Если линии достаточно толстые, то место их соединения можно настроить с помощью свойства lineJoin, которое может принимать следующие значения: miter – установлено по умолчанию, round и bevel. Пример: 

im_1.lineWidth = 40; 

im_1.strokeStyle = 'black'; 

im_1.lineJoin = 'bevel'; 

//im_1.miterLimit = 1.2; 

im_1.moveTo(0,30); 

im_1.lineTo(200,30); 

im_1.lineTo(20,100); 

im_1.stroke(); 

im_1.lineJoin = 'round'; 

im_1.lineJoin = 'bevel'; 

Рисование дуги и окружности, метод arc. 

Дугу или окружность рисует метод arc(x,y,r,a_1,a_2,b) , где x,y - координаты центра; a_1,a_2 - угол начала дуги и угол конца дуги соответственно; b - логическая переменная, указывающая на направление рисования дуги. Данный метод создаёт путь пера начиная с того места где он был закончен до точки начала дуги и до точки конца дуги. Поэтому прежде чем начинать рисовать данным методом, необходимо переместить перо методом moveTo в начало дуги или вызвать метод beginPath. Пример: 

................. 

g.lineWidth = 2; 

g.moveTo(50,100); 

g.arc(100,100,50,3.14,3.14/2,true); 

g.stroke(); 

................. 

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

Рисование закруглённых углов. Метод arcTo. 

arcTo(x1,y1,x2,y2,r) - рисует дугу по следующему принципу: точка (x1;y1) совместно с текущей позицией пера создают прямую, которая является касательной к окружности на которой будет нарисована дуга. В свою очередь в точке пересечения этой прямой с окружностью дуга будет иметь начальную точку. Точка (x2;y2) совместно с точкой (x1;y1) создают прямую, которая так же является касательной к окружности. Точка пересечения этой второй прямой с окружностью является конечной точкой дуги. 

Данный метод так же создаёт путь пера. С его помощью удобно рисовать закруглённые углы. Пример: 

.................. 

g.beginPath(); 

g.moveTo(100,50) 

g.arcTo(100,150,200,150,100); 

g.lineWidth = 2; 

g.stroke(); 

.................. 

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

Рисование прямоугольника. Метод rect(). 

Метод rect(x,y,width,height) создаёт путь пера в виде прямоугольника заданного аргументами. 

Заливка текущего пути. Метод fill(). 

Метод fill() заливает замкнутую область текущего пути способом, установленным в свойстве fillStyle. Если область не замкнута, то она замыкается автоматически. 

Заливка прямоугольной области. Метод fillRect(). 

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

Рисование прямоугольника. Метод strokeRect(). 

Метод strokeRect(x,y,width,height) рисует прямоугольник. После данного метода использование метода stroke не нужно. 

Cтирание прямоугольной области. Метод clearRect(). 

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

Вывод текста. Метод fillText(), свойства font, textAlign и textBaseline. 

Метод fillText(str,x,y) выводит строку str в положение с координатами (x,y). Для настройки шрифта существует свойство font, которому необходимо присвоить строку в следующем виде: 

g.font = '14px Times New Roman'; 

Свойство textAlign отвечает за выравнивание текста и может принимать следующие значения: start, end, left, right и center. 

Так же есть свойство textBaseline, которое определяет положение самого текста относительно точки (x,y), координаты которой переданы в качестве аргументов методу fillText. Это свойство может принимать следующие значения:  top,hanging, middle, alphabetic, ideographic и bottom. 

Принцип анимации. 

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

В JavaScript изменение изображений осуществляется за счёт установки интервала методом setInterval. Само изображение меняется за счёт изменения атрибута src элемента img, которое в коде программы доступно через свойство с таким же именем. В простейшем случае анимация из двух изображений может выглядеть следующим образом: 

<body> 

<img src = "Mill_1.GIF" border = "1" width = "150" id = "mill"> 

<script> 

var b = true; 

function an() 

{ 

  if (b) { 

    mill.src = 'Mill_2.GIF'; b = false; 

  } else { 

    mill.src = 'Mill_1.GIF'; b = true; 

  } 

} 

setInterval(an,500); 

</script> 

</body> 

Первый рисунок: 

Второй рисунок: 

Примечание: при создании анимации необходимо, что бы рисунки были одинаковыми по размеру, либо их размер необходимо устанавливать принудительно. 

Кэширование изображений. 

Для того, что бы не было задержек при смене изображений, их необходимо кэшировать. Задержки могут возникнуть в том случае, если рисунок будет долго загружеться. Кэширование изображений - это загрузка их в кэш браузера. Для этого необходимо просто создать объект-изображение с помощью конструктора Image и присвоить его свойству src url адрес. После чего изображение загрузиться в кэш браузера. В дальнейшем если присвоить этот же адрес другому объекту-изображению, то рисунок будет отображён уже из кэша. Кэширование логично произвести после полной загрузки документа, после чего и запустить анимацию. Пример: 

//После полной загрузки документа 

onload = function() { 

  //Загружаем в кэш второе изображение 

  (new Image()).src = "Mill_2.GIF" 

  //Создаём анимацию 

  setInterval(an,500); 

} 

Вставка рисунков в canvas. Метод drawImage(). 

Метод drawImage(image,x,y,width,height) - выводит рисунок в тэг canvas. Здесь image может быть объект-элемент img из html документа, либо объект созданный конструктором Image, как в предыдущем примере, либо объект canvas. width и height - необязательные параметры задающие ширину и высоту рисунка. 

Вывод фрагмента изображения. 

Этот же метод ещё можно вызывать с другим набором аргументов: drawImage(image,sX,sY,sWidth,sHeight,x,y,width,height). В таком случае в тэг canvas будет выведен фрагмент изображения заданный аргументами. Далее приведём их назначения: 

image - объект img, объект созданный Image или объект canvas; 

sX,sY - координаты левого верхнего угла фрагмента; 

sWidth,sHeight - ширина и высота фрагмента; 

x,y - координаты точки в тэге canvas куда будет помещен фрагмент; 

width,height - ширина и высота фрагмента уже в тэге canvas. 

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

Примечание: при изучении какой либо литературы по созданию анимации вы можете встретить слово спрайт. Так вот спрайт – как раз и есть подобный файл, который содержит в себе изображения различных поз объекта, за счёт смены которых осуществляется движение объекта. 

Методы для рисования в canvas, не вошедшие в учебник. 

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

clip() - обрезает текущий путь используя область отсечки. 

closePath() - закрытие пути пера. 

bezierCurveTo() - создаёт путь пера в виде кривой Базье первого порядка. 

quadraticCurveTo() - создаёт путь пера в виде кривой Базье второго порядка. 

Объект CanvasGradient - линейный цветной градиент. 

createRadialGradient() - создаёт радиальный цветной градиент. 

createLinearGradient() - создаёт линейный цветной градиент. 

globalCompositeOperation - свойство определяет как должны смешиваться цвета. 

createPattern(image,style) - создаёт мозаику из изображений image в стиле style. style - одна из следующих строк: «repeat-x» - повторение в направлении x; «repeat-y» - повторение в направлении y; «repeat» - повторение в обоих направлениях; «no-repeat» - однократное использование изображения. Метод возвращает объект CanvasPattern, который в свою очередь можно присвоить свойствам strokeStyle или fillStyle. 

restore() - устанавливает параметры холста в ранее сохранённые значения. 

save() - сохраняет копию текущих параметров холста. 

rotate(a) - поворачивает холст на угол a. 

scale(sx,sy) - масштабирует систему в соответствии с аргументами. 

translate(dx,dy) - сдвигает систему координат. 

Задачи. 

1. Создать функцию рисующую окружность. В качестве аргументов она должна получить ссылку на контекст рисования, координаты центра и радиус. Так же в качестве необязательных параметров может быть передан цвет и толщина линии. А так же если необходимо залить цветом, то цвет. 

2. Создать функцию рисующую прямоугольник с закруглёнными углами. В качестве аргументов она должна получить ссылку на контекст рисования, координаты левого верхнего угла, длину и ширину, а так же радиус закругления углов. Так же в качестве необязательного параметра можно передать цвет и толщину линии. А так же если необходимо залить цветом, то цвет. 

3. Создать небольшой анимационный ролик. 

4. Создать игру.