jsfiddle здесь
Мне сегодня скучно на работе, поэтому я просто начал что-то создавать с помощью canvas, чтобы попытаться научить себя чему-то. Я застрял в этой части и решил обратиться к SO-сообществу вместо того, чтобы биться головой о стену.
Основная идея состоит в том, чтобы прослушать щелчок, а затем создать случайно окрашенный круг, в котором пользователь щелкает, анимируя его в большем размере и затухая.
Это прекрасно работает, когда вы просто щелкаете мышью и позволяете ей исчезнуть. Проблема возникает, когда на холсте больше одного круга. Я могу сказать, что это происходит из-за того, как я делаю свой цикл анимации, но ради жизни я не могу понять, как сделать это лучше.
Должен ли я иметь цикл анимации, отдельный от setInterval, который увеличивает / уменьшает круги? Если так, что должен делать этот цикл? Мне кажется, что мне нужно отделить размещение / увеличение / исчезновение кругов от фактического рендеринга.
РЕДАКТИРОВАТЬ: я заметил, что это, кажется, работает только в Chrome (возможно, сафари тоже)