O
O
oelena2019-11-08 13:16:52
JavaScript
oelena, 2019-11-08 13:16:52

Animating and dragging a canvas element to a specific point?

For example , we have green and red squares drawn on canvas. How to make the green animation move to the unfilled block below, and the red one can also be moved with the mouse to the bottom unfilled block below it (and only there and nowhere else)?
In which direction to look and what can be read on this issue? It would be nice to see it all in an example.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
RAX7, 2019-11-08
@oelena

You can read about animation here: https://learn.javascript.ru/js-animation
about drawing on canvas - https://developer.mozilla.org/ru/docs/Web/API/Canv...

V
vadimMalovaniy, 2019-11-08
@vadimMalovaniy

1. You make a set interval with a frequency of 16ms and each tick changes the coordinates of the green cube by +1 pixel. You check the coordinates, if they match with the unshaded one, you delete the setinterval.
2. You check by coordinates, if the user clicked on the red block, hang up the handler on mousemove and change the coordinates of the red to the coordinates of the cursor position.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question