Как сделать так, чтобы круг следовал по пути на холсте?

Question

Я хочу, чтобы пользователь мог щелкнуть три точки на холсте, чтобы сформировать два отрезка линии с тремя кружками для каждого места, по которому щелкнул пользователь.Когда пользователь нажимает кнопку, в первом круге, по которому щелкнул пользователь, появляется красный кружок, а затем идет по пути, который нарисовал пользователь.Когда он достигает 2-го круга и, наконец, последнего круга, появляется некоторая форма оповещения, когда он достигает этих точек.

Answer 1

Я не собираюсь делать все это для вас. Тем не менее, вот отправная точка

1) Убедитесь, что вы можете захватывать события мыши на холсте. Этот вопрос поможет вам начать HTML5 canvas и jquery

2) Понять проблему, которую вы кодируете. Вам нужна структура данных примерно так:

points{
    a : {x : None, y : None},
    b : {x : None, y : None},
    c : {x : None, y : None}  
};

3) Каждый раз, когда пользователь нажимает, обновите a, затем b, затем c. Когда вы доберетесь до c, используйте тригонометрию, чтобы оживить нарисованную линию. Это можно сделать с помощью setTimeout или setInterval