14Анимация прямолинейного движения

Анимацию прямолинейного движения можно осуществить следующим образом: function arc(){ ctx.beginPath(); ctx.fillStyle = "black"; ctx.arc(x,100,50,0,2*Math.PI,0); ctx.fill(); } function amin(){ setInterval(function(){ ctx.clearRect(0,0,800,600); x=x+1; arc(); },20); }

В функции arc() отрисовывается чёрный круг с координатами x и 100, радиусом 50. Во функции amin() используется setInterval, который через каждые 20 милисекунд вызывает функцию, описанную внутри него. В ней сначала очищается холст, затем изменяется координата x окружности. Затем отрисовывается круг с уже изменённой координатой. То есть, через каждые 20 милисекунд окружность будет смещаться на 1 пиксель вправо.

Функцию рисования круга arc() можно так же рекурсивно вызывать внутри себя с помощью setInterval, например так:

function anim(){ ctx.clearRect(0,0,800,600); x=x+5; arc(); setInterval(anim,20); }

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

15.Анимация движения по окружности

Анимацию движения по окружности можно осуществить следующим образом: function kvad(){  ctx.fillStyle = "red"; ctx.fillRect(x+vx,y+vy,100,100); } function anim(){ setInterval(function(){  ctx.clearRect(0,0,800,600); vx = Math.cos(Angle)*radius; vy = Math.sin(Angle)*radius; Angle+=0.1; kvad(); }, 25) } В первой функции отрисовывается красный квадрат 100 на 100 с координатами x+vx и y+vy. x и y начальные координаты верхнего левого угла нашего квадрата, а vx и vy изменяемая часть  координат. Во второй функции у нас setInterval, который каждые 25 милисекунд вызывает функцию, описанную внутри него. В ней каждый раз происходит очистка холста, затем расчет vx и vy для движения по окружности, для этого мы воспользовались косинусом и синусом от Angle и умножили на радиус окружности по которой и должно происходить перемещение. Затем происходит увеличение угла и чем оно меньше, тем медленне будет происходить перемещение объекта. Потом уже отрисовка квадрата с уже изменёнными координатами.

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

Чтобы нарисовать изображение на холсте с контекстом ctx часто используется метод drawImage() с параметрами, определяющими положение и размеры рисуемого изображения: ctx.drawImage(mim,x,y,w,h). Здесь используются параметры: x,y – координаты верхнего левого угла изображения; w,h – ширина и высота прямоугольной области, в которую врисовывается изображения. Если размеры области не совпадают с размерами исходного изображения, то применяется масштабирование. mim – объект изображения, загрузку которого можно определить несколькими способами:

1. Привязка функции-обработчика события onload к объекту Image, определяемому в программе:

var img = new Image; img.src = “myImage.png”; img.onload = function(){ alert(“Изображение загружено”); };

В тот момент, когда браузер исполняет присваивание img.src=”myImage.png”, начинается загрузка изображения. Далее определяется функция, которая будет вызвана в момент завершения загрузки. Единственное действие этой функции в нашем примере – выполнение функции alert.

2. Функцию-обработчик завершение загрузки можно привязать к элементу img, определяется в теле web-страницы:

<body> <img src=”myImage.png” onload=”imgReady()”> </body>

Функция-обработчик в данном случае – imgReady(). Ее привязка к изображению устанавливается в теле HTML-документа. Такие способы не совсем удобно использовать для определения событий - завершения загрузки нескольких связанных в приложении изображений.

3. Более удобным для определения завершения загрузки нескольких изображений, является следующий прием. Пусть создан массив объектов:

var imgs=new Array;

imgs[0]=new Image;

imgs[0].src=”myImage0.png”;

imgs[1]=new Image;

imgs[1].src=”myImage1.png”;

Загрузка изображений ведется браузером, и момент завершения загрузки для нас заранее не известен. Введем функцию

function waitForImages(imgs) { for(var i=0;i<imgs.length;i++){

if (!IMG[i].complete){

setTimeout("waitForImages()",100);

return;} }}

В эту функцию передается единственный параметр – ссылка на массив изображений. Функция проверяет завершение загрузки изображения. С помощью цикла for(var i:=0;i<imgs.length;i++) просматриваются все элементы массива imgs, свойство comlete, говорящее загружено изображение или нет, возвращает true, если изображение загружено, в противном случае false. Если хотя бы одно изображение не успело прогрузиться, функция waitForImages вызывается повторно через указанный промежуток времени.

17.Использование патернов

Метод createPattern(image,type) заливает фигуру соответствующим изображением. Метод принимает два параметра: image – непосредственно изображение type – строка, соответствующая одному из значений: repeat, repeat-x, repeat-y и no-repeat. Перед применением метода следует убедиться, что изображение загружено. Приведем пример использования метода createPattern():

function MadePattern(){

Ctx.save();

Ctx.beginPath();

Ctx.fillStyle=ctx.createPattern(IMG[0],”repeat”);

Ctx.fillRect(0,0,300,300);

Ctx.restore();

}

В качестве заливки используется изображение IMG[0] ранее загруженное в массив изображений. “repeat” – значит повторить изображение в случае, если область, которую следует “разукрасить” больше самого изображения, использованного в качестве заливки.

• repeat Повторение изображения в обоих направлениях (по умолчанию)

• repeat-х Повторение изображения в направлении оси X

• repeat-у Повторение изображения в направлении оси У

• no-repeat Изображение не повторяется и не выводится