Рисование анимации холста для пирога по времени h: m: s

Question

Как нарисовать холст пирога установленным временем в входах H: M: S? У меня есть fiddle, но он работает на процент. Пожалуйста, помогите сделать процесс анимации установленными значениями времени. Спасибо.

 function animate(current) { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.beginPath(); 
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
     context.stroke(); 
     curPerc++; 
     if (curPerc < endPercent) { 
      requestAnimationFrame(function() { 
       animate(curPerc/100) 
      }); 
     } 
    } 

Answer 1

Прежде всего, что вам нужно сделать, это проверить общее время ваших значений. Сделайте это, нажав кнопку «Пуск».

var hours = document.getElementById("hh").value; 
var minutes = document.getElementById("mm").value; 
var seconds = document.getElementById("ss").value; 

var totalTime = 60*60*hours + 60*minutes + seconds; 

Следующий шаг - отделить выращивание вашего пирога за пределами чертежа. Прямо сейчас вы используете rAF, что означает, что вы будете обновлять свой пирог всякий раз, когда браузер будет готов.

var degreesPerSecond = 360/totalTime; 
var updateFrequency = 200; //milliseconds 
var curDeg = 0; //Keeping track on the currect degree 

function update() { 
    curDeg += degreesPerSecond/1000*updateFrequency; 
    curPerc = curDeg/360; 
} 

При нажатии кнопки «Пуск» вы также начинаете интервал.

var myInterval = setInterval(update,updateFrequenzy); 

Заканчивать это обновление вашего fiddle