javascript - context.clearRect() 真的那么贵吗？

Question

我的这幅 Canvas 动画展示了一些奇怪的特征:

http://jsbin.com/olasol/2/edit

我使用的是最新版本的 Chrome。我正在使用 Chrome 的内置 FPS 监视器(您可以通过转到 about:flags 来激活它)。我在 JavaScript 部分标记了我认为是潜在罪魁祸首的行:

fallingctx.clear();

这一行没有什么特别的。它调用一个函数，该函数又调用 clearRect()。

我注意到的“奇怪”的事情是:

1. clear(); 函数在我的笔记本电脑 (Core 2 Duo) 上导致非常明显的 FPS 下降，但在我的台式机 (i5 2500k) 上却没有。

2. 仅删除该行就足以在我的笔记本电脑上产生 60fps。正如预期的那样， Canvas 不会在每一帧后清除，但它仍然会产生稳定的 60fps。

3. FPS 下降仅在我的 Chrome 窗口较大时发生!当我缩小窗口并重新加载时，它不会发生! (清除更大的矩形是否更昂贵？)。

4. 我尝试用全白 JPEG 的 drawImage() 替换 clear() 以覆盖 Canvas 。 JavaScript 能够在每个周期为较小的图像粒子执行 200 次 drawImage()(从第二点可以看出)。但是，当我为整个 Canvas 添加一个 drawImage 时，它再次滞后! (确保输出占据整个屏幕以重现结果。)

为什么会发生这一切？我该如何解决？

Answer 1

它确实取决于硬件，但想想调用clearRect 必须做什么!本质上必须将一 block 足够大的内存清零以处理 Canvas 内容。这可能代价高昂。想一想在高清分辨率下需要多少内存来保存 RGBA...那是超过 200 万像素的数据，大约 8 MB 字节无可否认，现在一般情况下还不是那么多，但是如果有的话与将内存推送到视频卡或您每秒执行 60 次操作相关的任何带宽或缓存问题……好吧，预计会出现问题。

我听说经常起作用的只是清除以前绘制图像的位置。参见 http://jsbin.com/olasol/6/edit

我为您做了以下更改。

    for (var i=0; i< noOfDrops; ++i)
    {
        fallingctx.clearRect(
          fallingDrops[i].x-1,
          fallingDrops[i].y-1,
          fallingDrops[i].image.width+2,
          fallingDrops[i].image.height+2);
    }
    for (var i=0; i< noOfDrops; ++i)
    {
        fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
        fallingctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y);
    }

我需要 clearRectaround 渲染图像的位置可能有一个很好的理由，但一个简单的原因让我无法理解。 (这与不完全在指定像素处呈现的事物有关......我完全忘记了)。

你还需要做一些关于你在加载图像之前启动渲染循环的事实(也在 jsbin 中)所以我添加了

var imgSource = "http://lorempixel.com/20/20/sports/"; 
var imgObj = new Image();

并替换了superinit

function superinit()
{ 
    imgObj.onload = function(){
        flowerfallsetup();
        requestAnimFrame(flowerfall);
    }
    imgObj.onerror = function (){
        alert("could not load image");
    }
    imgObj.src = imgSource;
}

编辑:由于先前的图像设置，我忘了提及，我确实更改了您的 flowerfallsetup 中的行:

      fallingDr["image"] = imgObj; 

有很多方法可以处理图片的异步加载，我只是选择了一种对这个例子来说很容易的方法。

编辑:我不得不承认，这可能还有更多内容。它在桌面浏览器上运行良好，但在 iPhone 上， 存在裁剪问题。如果我能找出导致问题的原因，我会尝试发布更新。