Как пройти круг в холсте?

Question

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

Answer 1

Я не собираюсь делать все это за вас. Однако здесь есть начальная точка

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

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

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

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