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

的此更新

饼图的画布动画按时间h：m：s

1 个答案: