Анимация и перетаскивание элемента canvas в определенную точку?

Question

[oelena]

Например у нас есть зеленый и красный квадраты нарисованные на канвас. Как сделать так, чтоб зеленый переместился анимацией на не закрашенный блок внизу, а красный можно было мышкой перенести тоже в нижний не закрашенный блок под ним (и только туда и никуда более)?
В какую сторону смотреть и что можно почитать по данному вопросу? Хорошо бы еще посмотреть это все в примере.

Answer 1

[RAX7]

Почитать про анимации можно тут: https://learn.javascript.ru/js-animation
про рисование на канвасе - https://developer.mozilla.org/ru/docs/Web/API/Canv...

Comments

[oelena]

спасибо большое)

[RAX7]

oelena, да не за что=)

[oelena]

Мои "первые шаги" в рисовании на канвасе выглядят по другому, спасибо за ссылки, пойду изучать.

Answer 2

[vadimMalovaniy]

1. Делаешь сетинтервал с частотой 16мс и каждый тик меняещь координаты зеленого куба на +1пиксель. Проверяешь координаты, если совпадают с не закрашенным, удаляешь сетинтервал.
2. Проверяешь по координатам, если пользователь кликнул на красный блок, вешаешь обработчик на mousemove и меняешь координаты красного на координаты позиции курсора.