在时间 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 的此更新