Canvas - 페이드 아웃 케이스

Question

캔버스를 사용하여 간격이있는 임의의 색상이 지정된 오브젝트를 생성하고 있습니다. 제가하고 싶은 것은 안개 속으로 퇴색하는 것처럼 피사체를 희색 성으로 퇴색시키는 것입니다.

모든 프레임에서 모든 개체를 다시 그리지 않고도이 작업을 수행하고 싶습니다. 대신, 나는 작은 불투명도를 가진 오브젝트들 사이에 흰색 레이어를 넣어서 페이드 아웃 효과를줍니다.

여기에 내 현재의 접근 방식 : http://jsfiddle.net/zettam/pUVkA/26/

var cvas = document.getElementById("ctxt"); 
var cx = cvas.getContext("2d"); 

function randomColor(num) { 
    return Math.floor(Math.random() * num); 
} 

setInterval(function() { 
    var r = randomColor(255); 
    var g = randomColor(255); 
    var b = randomColor(255); 
    cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)"; 
    cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random()); 
}, 200); 

setInterval(function() { 
    cx.fillStyle = "rgba(255,255,255,0.025)" 
    cx.fillRect(0, 0, 500, 500); 
}, 20);​ 

Asyou는, 객체 대신, 그들은 어딘가에 회색에서 완전히 흰색 만 머물 페이드 아웃 결코 볼 수 있습니다.

모든 프레임마다 모든 것을 다시 그릴 필요없이 내가 원하는 것을 어떻게 얻을 수 있습니까?

감사합니다.

Answer 1

0.1보다 작 으면 cx.fillStyle = "rgba(255,255,255,0.025)"의 불투명도 설정이 작동하지 않습니다. (해당 함수의 계산 문제가 있습니까?)

0.025 대신 0.1으로 설정하고 간격을 50처럼 보완하도록 변경하십시오.

Answer 2

이 시도 : http://jsfiddle.net/pUVkA/31/

그것은 두 가지 방법 사이의 타협이다. @ 조쉬 언급했듯이 캔버스 합성 코드는 0.1 미만의 불투명도로 완전히 겹쳐서 문제가 있습니다.

var cvas = document.getElementById("ctxt"), 
    cx = cvas.getContext("2d"), 
    lFade = new Date(), 
    lBox = new Date(), 
    lClear = new Date(); 

function randomColor(num) { 
    return Math.floor(Math.random() * num); 
} 

(function draw(){ 
    var now = new Date(); 

    if (now - lFade > 20){ 
     cx.fillStyle = "rgba(255,255,255,0.025)" 
     cx.fillRect(0, 0, 500, 500); 
     lFade = now; 
    } 
    if (now - lClear > 800){ 
     cx.fillStyle = "rgba(255,255,255,0.1)" 
     cx.fillRect(0, 0, 500, 500); 
     lClear = now; 
    } 

    if (now - lBox > 200){ 
     var r = randomColor(255); 
     var g = randomColor(255); 
     var b = randomColor(255); 
     cx.fillStyle = "rgba(" + r + "," + g + "," + b + ",1.0)"; 
     cx.fillRect(200*Math.random(), 200*Math.random(), 300*Math.random(), 300*Math.random()); 
     lBox = now; 
    } 

    setTimeout(draw, 1000/60); 
})();