1

我正在尝试使用画布制作轻量级进度条。该项目的目标是使进度条从给定变量填充到 N%。出于本演示的目的，我手动设置了 50% 的填充。

有两种颜色：加载时填充的红色和绿色表示已完成的进度。

如何为绿色填充的进程设置动画？

http://jsfiddle.net/ZpRm7/

var canvas = document.getElementById('myProgress');
var myPerc = 500;
ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255, 0, 0)";  //red

ctx.fillRect(0,0,myPerc,100);
ctx.save();
    for (var i=0;i<(myPerc*0.5);i++)
    { 
        ctx.fillStyle = "rgb(0, 255, 0)";  //green
            setTimeout(function() {
                    ctx.fillRect(0,0,+i,100);
            }, 1000);   

    }
4

1 回答 1

1

发布的代码有两个问题。首先，您将每个超时的持续时间设置为 1000。这意味着每个超时将在一秒钟内完成，所有这些都是在同一时间完成的。相反，我假设您希望它们相隔一秒钟。

i第二个是在循环中使用的一个非常常见的问题setTimeout。您可以在整个 SO 中找到答案。这似乎是更彻底的内容之一： JavaScript 闭包内循环 – 简单的实际示例

解决了这两个问题后，您将得到以下信息：

var canvas = document.getElementById('myProgress');
var myPerc = 500;
ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255, 0, 0)";  //red

ctx.fillRect(0,0,myPerc,100);
ctx.save();

for (var i=0;i<(myPerc*0.5);i++)
{ 
    ctx.fillStyle = "rgb(0, 255, 0)";  //greeen

    (function(i){
        setTimeout(function() {
            ctx.fillRect(0,0,+i,100);
        }, 1000*i);
    })(i);
}

http://jsfiddle.net/ZpRm7/1/

您可能会考虑setInterval或使用其他方法来避免一次创建如此多的超时。

于 2013-01-08T19:49:53.343 回答