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);

正如你所看到的，物体永远不会淡出到完全白色，而是会留在灰色的某个地方。

如何在不必每帧重新绘制所有内容的情况下实现我的需求？

感谢。

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);
})();

画布 - 淡出案例

2 个答案: