javascript - Canvas 进度矩形两种颜色

Question

我正在尝试使用 Canvas 制作一个轻量级进度条。该项目的目标是让进度条从给定变量填充到 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);   

    }

Answer 1

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

第二个是在 setTimeout 循环中使用 i 时出现的一个非常常见的问题。你可以在 SO 上找到答案。这似乎是更彻底的之一:JavaScript closure inside loops – simple practical example

解决这两个问题后，您会得到:

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 或其他一些方法来避免一次创建如此多的超时。