RequestAnimationFrame в Javascript

Question

Я хочу анимировать отрезок круга (45 градусов) на холсте. Но по ряду причин это не сработает. Что я тут делаю не так?

[Демо][1]

window.onload = function() {
            (function() {
              var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
              window.requestAnimationFrame = requestAnimationFrame;
            })();
            var canvas = document.getElementById('myCanvas');
            var ctx    = canvas.getContext('2d');
            var startAngle = Math.PI * 1.5;
            var endAngle   = startAngle + 45 * (Math.PI / 180);
            var percent = 0;
            ctx.lineWidth = 10;
            ctx.strokeStyle = '#ad2323';
            function animate (cur){
                ctx.beginPath();
                ctx.arc(canvas.width / 2, canvas.height / 2, startAngle, endAngle * cur, false);
                ctx.stroke();
                ctx.closePath();
                percent++;
                requestAnimationFrame(function () {
                     animate(percent / 100)
                });
            }
};

Answer 1

У вас есть пара ошибок в вашем коде. Проблема не связана с requestAnimationFrame,

1. Тебе нужно endAngle чтобы быть дельтой, которую вы хотите оживить, т.е. 45 градусов. Вы используете линейную функцию для анимации, которая start + (end - start)*cur не end*cur,
2. У вас не указан радиус
3. Вам нужно проверить percent быть меньше 100.

Демо

Answer 2

Как насчет:

 ctx.arc(canvas.width / 2, canvas.height / 2, startAngle, endAngle * percent, false);

Не уверен, что вы используете аргументы requestAnimationFrame() должным образом.