Gürültü görünümü veren bu eleman tuval ve boyalar rastgele temsil etmek değerler oluşturur; bir fonksiyonu generateNoise() adında var.

Benim Sorum

Sonsuz için en iyi yol olacağını gürültü hareket ediyor görüntüsü vermek için animasyon. Daha fazla hayat olabilir ki?

JSFiddle

function generateNoise(opacity) {
    if(!!!document.createElement('canvas').getContext) {
        return false;
    }
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        x,y,
        r,g,b,
        opacity = opacity || .2;

        canvas.width = 55;
        canvas.height = 55;

        for (x = 0; x < canvas.width; x  ){
            for (y = 0; y < canvas.height; y  ){
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(Math.random() * 255);

                ctx.fillStyle = 'rgba('   r   ','   b   ','   g   ','   opacity   ')';
                ctx.fillRect(x,y,1,1);

            }
        }
        document.body.style.backgroundImage = "url("   canvas.toDataURL("image/png")   ")";

}
generateNoise(.8);

Eğer gürültü animasyon uygulamak istiyorsanız, o zaman bunu yapmanın etkili bir yol olması gerekir. Kod sundu bu çok pahalı ve muhtemelen kaynakları tarayıcıda mevcut en tüketecektir.

Burada gürültü hızlı 32-bit kullanarak yapmak için bir yol dizi tampon yazılan:

Güncelleme 2

(Ayrıca Bkzthis variantsabit bir boyut tuval ve ölçekler belki de daha gerçekçi bir görünüm verir hatta ve hatta daha hızlı çalışabilir penceresine sığdırmak için, içeriği) kullanır.

Bunu daha hızlı yapmak gerekir createImageData() ben tamamen unutmuşum..) ile getImageData() yerini aldı.

Live demo

function noise(ctx) {

    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.createImageData(w, h),               // create image data
        buffer32 = new Uint32Array(idata.data.buffer),   // get 32-bit buffer
        len = buffer32.length,
        i = 0;

    for(; i < len;)
        buffer32[i  ] = ((255 * Math.random())|0) << 24; // alter alpha channel

    ctx.putImageData(idata, 0, 0);
}

Güncelleme 4

Küçük bir çimdik daha hızlı yerine bu hattı kullanarak yapmak için:

for(; i < len; i  )
    if (Math.random() < 0.5) buffer32[i] = 0xff000000;

Updated fiddle here

Sen requestAnimationFrame kullanarak döngü şimdi:

(function loop() {
    noise(ctx);
    requestAnimationFrame(loop);
})();

Buyapınbazı CSS gerektirir:

#canvas {
    background:#777; /* or white */
    }

Gürültü yöntemi alfa kanalı değiştirerek çalışır. Siyah piksel (değer geri kalanı 0 değeri her bir bileşen için) tuval varsayılan olarak piksel değişken alfa değeri beyaz arka plan daha fazla veya daha az göstermek zorunda kalacak.

Uint32Array sadece orijinal 8-bit buffer (bellek arabellekleri 8-bit) için bir başvuru kullanır ama JavaScript daha kısa sürede bir dizin Yukarı bakmak geçirmek için izin verir.

Güncelleme 3

İşte eski TV açık: kötü resepsiyon parazit/gürültü öykünen bir türevi

Demo

Güncelleme

Performans (ref. yorum) - burada 8-bit arabellek () kenetlenmiş ve 32-bit bir yineleme üzerinde test jsperf test (uınt32 olmayan kelepçeli).

Test yineleme aynı sayıda olması nedeniyle test-Yukarı Bak mal JavaScript bir dizin Yukarı bakmak harcamak gerekir ne () daha fazla veya daha az ölçmek. Bu tuval, tarayıcı motor, donanım vb boyutuna bağlı olarak değişebilir. yani sadece test gösterici olarak kullanın.