按时为馅饼绘制 canvas 动画 h:m:s

Question

如何在输入 H:M:S 中按设定时间绘制饼图 canvas？我有 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

的更新

按时为馅饼绘制 canvas 动画 h:m:s

Drawing canvas animation for pie on time h:m:s

javascript

jquery

canvas

drawing