캔버스 진행 사각형 2 색

Question

캔버스를 사용하여 가벼운 진행률 표시 줄을 만들려고합니다. 이 프로젝트의 목표는 주어진 변수에서 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으로 설정합니다. 이는 각 시간 초과가 모두 동시에 완료된다는 것을 의미합니다. 나는 당신이 그들이 1 초 간격으로 떨어져 있기를 원한다고 가정하고 있습니다.

두 번째는 setTimeout의 루프에서 i을 사용하면 매우 일반적인 문제입니다. 당신은 그 모든 것에 대한 해답을 찾을 수 있습니다. 이것은 더 철저 중 하나가 될 것으로 보인다 고정 이러한 문제의 양쪽으로 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 또는 다른 방법을 고려해 볼 수 있습니다 한 번에 많은 시간 초과.