1

我正在使用画布生成具有间隔的随机彩色对象。我想要做的是，将物体淡化成白色，就像它们淡化成雾一样。

我想在不需要重绘每一帧中的每个对象的情况下实现这一点。相反，我在对象之间放置了白色层（不透明度很小），这样它就可以产生淡出效果。

这是我目前的方法：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);​

如您所见，这些对象永远不会淡出为全白，而是停留在灰色的某个地方。

我怎样才能实现我所需要的，而不必在每一帧都重新绘制所有内容？

谢谢。

4

2 回答 2

1

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

尝试将其设置为0.1而不是0.025将间隔更改为更高的值以进行补偿，例如50？

于 2012-11-12T19:37:59.820 回答
1

试试这个：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);
})();
于 2012-11-12T21:31:37.113 回答