画布 - 淡出案例

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

cx.fillStyle = "rgba(255,255,255,0.025)"中的不透明度设置在小于0.1时不起作用。 （这个函数有一些计算问题？）

尝试将它设置为0.1而不是0.025，并将间隔更改为更高的值来补偿，如50？

Answer 2

试试这个：http://jsfiddle.net/pUVkA/31/

这两种方法之间的妥协。正如@Josh所提到的，画布合成代码存在一个问题，即完全覆盖不透明度小于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); 
})();