Question

我在javascript / HTML5画布中制作了一个白噪声动画，以覆盖整个浏览器窗口。

我使用的屏幕外方形画布等于源图像的浏览器窗口大小的一半：

var doc = document;
h = Math.max(
    doc.body.scrollHeight, doc.documentElement.scrollHeight,
    doc.body.offsetHeight, doc.documentElement.offsetHeight,
    doc.body.clientHeight, doc.documentElement.clientHeight
);
w = Math.max(
    doc.body.scrollWidth, doc.documentElement.scrollWidth,
    doc.body.offsetWidth, doc.documentElement.offsetWidth,
    doc.body.clientWidth, doc.documentElement.clientWidth
);

blocksize = Math.floor(h / 2);
tilesize = Math.floor(blocksize / 8);

tiles_w = Math.floor(w / tilesize);
tiles_h = Math.floor(h / tilesize); 

var colors = [
    [255, 255, 255, 255],
    [220, 220, 220, 255],
    [170, 170, 170, 255],
    [120, 120, 120, 255],
    [0, 0, 0, 255]
    ];

offBlockCanvas = document.createElement("canvas");
offBlockContext = offBlockCanvas.getContext("2d");
offBlockCanvas.width = blocksize;
offBlockCanvas.height = blocksize;

var imageData = offBlockContext.getImageData(0, 0, blocksize, blocksize);
var imagedata = imageData.data;

for (i = 0; i < blocksize * blocksize * 4; i+=4) {
    var pixelcolor = parseInt(Math.random() * 8)

    if (pixelcolor > 3) {
        pixelcolor = 4;
    }

    imagedata[i] = colors[pixelcolor][0];
    imagedata[i + 1] = colors[pixelcolor][1];
    imagedata[i + 2] = colors[pixelcolor][2];
    imagedata[i + 3] = colors[pixelcolor][3];
}

offBlockContext.putImageData(imageData, 0, 0);

然后随机剪切1/8的屏幕外方形画布的平铺，直接blit到屏幕画布。结果看起来不错;根本没有平铺。

function snowloop() {
    requestAnimationFrame(snowloop);    

    for (i = 0; i <= tiles_h; i++) {
        for (j = 0; j <= tiles_w; j++) {
            var next_x = Math.floor(Math.random() * (blocksize - tilesize))
            var next_y = Math.floor(Math.random() * (blocksize - tilesize))
            context.drawImage(offBlockCanvas, next_x, next_y, tilesize, tilesize, j * tilesize, i * tilesize, tilesize, tilesize);
        }
    }


}

它在我的linux和Windows（45-60 FPS）上的所有浏览器中以及在我的Samsung Galaxy S3 Mini（Android 4.1 Jelly Bean）上的Opera和Chrome上运行非常顺利。 但是当我在Android上运行Firefox（v34.0）时，我只能获得5 FPS左右。

动画的完整代码在jsfiddle上： http://jsfiddle.net/lash/f9mdoods/3/

全窗口HTML5画布＆＃34;白噪声＆＃34;动画落后于Android Firefox

0 个答案: