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/

これは、2 つの方法の妥協点です。@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 に答える