Как сделать CANVAS анимацию?

Question

[Cheizer]

Друзья, нужна помощь с CANVAS, анимация простая, круг с обводкой в процентном соотношении.

Анимация

C canvas крайне плохо знаком, и вроде код выкроил, который отвечает за эту анимацию, но все равно не работает, подскажите, что не так? В какую сторону копать?

Мой код

Answer 1

[Максим]

https://www.youtube.com/watch?v=JFdguwXoeuw

Comments

[Cheizer]

Спасибо.

Answer 2

[twobomb]

https://jsfiddle.net/twobomb/s7ufxkw3/

Comments

[Cheizer]

Благодарю!

[Cheizer]

Подскажите пожалуйста, как можно запускать анимацию у этого CANVAS например у кругов только с определенным классом? Объясню, хочу при появлении в зоне видимости экрана только запускать анимацию, иначе все в пустую проигрывается. И что бы при появлении сделать, нужно привязать все к классу.

Я сделал проверку на класс в этом коде

$(".canvas canvas").each(function(id,el) {

	if($(this).hasClass("animate")) {
		   drawCircle(el,id);
	}

    });

Все хорошо, но другие круги невидимы просто оказались у которых нет этого класса, как можно что бы они были, но не проигрывали анимацию без класса animate?

[twobomb]

Роман Кузнецов, Ну ты же класс animate где то навешиваешь? Вместо того чтобы навешивать этот класс просто прописывай drawCircle и передавай нужный канвас который попал в зону видимости. Или на крайняк конструкцию выше повесь на обработчик сколла, и кстате id там не нужен в функции, он не используется можно убрать.

[Cheizer]

twobomb, да, с добавлением класса проблем нет при скролле, проблема в том что те круги к которым добавился класс при скролле, все равно не работают. Анимации проигрывается только при загрузке страницы сразу если :(

[twobomb]

Роман Кузнецов, Обновил

[Cheizer]

twobomb, НИЗКИЙ ПОКЛОН!

Answer 3

[Cheizer]

Нашел похожую реализацию https://codepen.io/egorava/pen/wGmmJW

Answer 4

[Aleksandr Shpak]

Там есть методы для отрисовки дуг.

arc(x, y, radius, startAngle, endAngle, anticlockwise)
arcTo(x1, y1, x2, y2, radius)

Вот так например окружность можно набросать:

ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true);
    ctx.stroke();

Вот так дугу:

ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI,false);  // рот (по часовой стрелке)
    ctx.stroke();

Дерзайте ;)