Canvas, animowane kółka dookoła kursora

Question

Witam, ostatnio zainteresowałem się znacznikiem <canvas> i jego możliwościami. Zrobiłem prosty efekt: gdy ruszam kursorem nad elementem canvas, tworzą się kolorowe kółka. Sęk w tym, że chcę te kółka zanimować, by poruszały się w losowym kierunku względem kursora (ewentualnie za nim podążały), a po chwili znikły. Nie mam pojęcia jak się za to zabrać, w internecie nic nie znalazłem, dlatego liczę na Waszą pomoc. Dzięki :>

https://codepen.io/anon/pen/YJrWaq

Comments

ojpr. jak bym był na kwasie to by mnie to zmiażdżyło!

Ciekawe.

moze te canvas maja jakieś timeout czy coś.

Answer 1

Aby w sposób poprawny bawić się znacznikiem canvas należny stworzy imitacje pętli czasu rzeczywistego. O co chodzi? Taka pętla wykonuję się cały czas w kolko. Mozesz ja stworzyć za pomocą setInterval. Jeśli ustawisz wartość na 33 ms to będziesz miał 60 fps. ;-) Jednak niektóre urządzenia mogły by złapać zadyszkę gdy zmuszasz je do renderowania zawsze 60 fpsow. Rozwiązaniem tego problemu jest użycie requestAnimationFrame. wówczas przy takim podejściu przy eventach na myszke możesz dodawać kropki do jakiejś tablicy. A setInterval wyświetli je z jakimś niezauważalnym opóźnieniem.

To co chcesz osiągnąć w grach nazywa sie efektami cząsteczkowymi możne znajdziesz jakieś przykłady pod tym hasłem ;-)