Всем доброго времени суток.
Есть задача:
На карте нужно последовательно (не одновременно) сгенерировать несколько квадратов (2-4), сделать анимацию их движения по заданому пути и по завершению пути удалить этот квадрат.
Я уже как 3й день грызу всеязычные туториалы по канвасу, но почему то не могу додуматься как это реализировать. Мне понятно как вставить само изображение, понятно как нарисовать квадрат, а вот анимации и работа с нескольками объектами я догнать не могу.
Я хотел бы понять:
-как работать с нескольками элементами
-как создавать анимацию движения для каждого элемента
Очень надеюсь на вашу помощь по этому вопросу, зарание спасибо.
З.Ы.
карту с координатами прикрепил

Анимация - тупо перерисовывать холст с частотой анимации, изменяя координаты. Сложные объекты отрисовывать в буферном холсте и при необходимости копировать на основной (увеличится FPS)
C несколькими элементами работать по очереди.

это все на словах.
я даже примерно не понимаю как это прописать в коде

Если вам это понятно, что мешает нарисовать квадрат в точке (x,y), Через, допустим, 100мс стереть, и нарисовать квадрат в точке (x+1, y+1). Затем повторять эти действия, пока квадрат не достигнет цели. Это и есть покадровая анимация.

кажется , вы открыли мне глаза.
то есть, если я правильно понял, то блок стирания должен присутствовать обязательно.
и если вас это нездатруднит - обьясните как работать с несколькими квадратами, хотя бы на пальцах.
я все еще не понимаю как генерировать несколько уникальных/независимых квадратов

eko24, перебирая квадраты(массив объектов с значениями или как оно реализовано у вас) в цикле: по старым координатами нарисовать квадрат фонового цвета, рассчитать новые координаты, нарисовать квадраты снова.

в том то и дело, что пока что оно никак не реализировано.
А вообще вы подкинули замечательный алгоритм.
И у меня появился еще один вопрос:
Я уже прекрасно понимаю, что нет ничего сложно перемещать обьект паралельно осям координат используя инкременты или декременты
Но вот как рационально сделать так, что бы квадрат, допустим, двигался с точки (0,0) в точку (200,150) ?
Очень жду Ваших ценных советов

eko24, нужно записать лагранжиан для данного квадрата.
Все зависит о того как он должен двигаться.
Если по прямой, то никаких проблем: задаем время, считаем скорость по х и у, на каждой итерации прибавляем к координате скорость(смещение за единицу времени)
Если скорость должна менятся - добавляем ускорения.
Если нужно двигаться вокруг препятствий, то тут уже нужно включать логику и придумывать алгоритмы движения, разбивая сложный маневр на серию простых.
Все(кроме лагранжиана) как в школьной программе за 8-10 класс

Это если фон однородный. Если фоном стоит картинка, или еще что-то сложное, можно например копировать на холст кусочек фона по заданным координатам. Но это все уже оптимизации, если простая перерисовка будет давать низкий FPS.

Чтобы стереть canvas достаточно присвоить свойству width или height значение. Можно даже то же самое, что и было. Т.е. для холста шириной 200px для стирания достаточно написать canvas.width = 200; (canvas - это ваш объект холста).

DelphinPRO, я писал отталкиваясь от рисунка выше. Да и начинать нужно с простого, а когда уже придет понимание дела(а судя по вопросу о движении не вдоль осей, его нет) тогда картинки, оптимизации и прочее.

Там просто набор точек на карте.
С движением по пути разобрался, после того как немного порыл темы на стаковерфлоу нашел уйму разнообразных плагинов решения этой проблемы (например вот этот http://ijin[dot]net/crSpline/demo[dot]html ).
У меня еще такое чуство, что полюбому появятся новые вопросы, и буду очень рад если вы снова сможете мне помочь.
Плюсами вас уже засыпал :3
(Добавление)
И вообще, если дружите с английским, то для начинающих в канвасе рекомендую эту книгу:
http://www[dot]amazon[dot]com/Foundation[dot][dot][dot]nt/dp/1430232919