在调整 HTML5 画布大小期间闪烁

Question

我在调整动画画布控件的大小期间观察到一些闪烁。

您可以在此页面上看到它的运行情况。左右拖动“宽度”滑块以亲自尝试。我在 Linux 上运行的 Chrome 26.0.1410.43 中看到此闪烁。目前，该页面在支持 HTML5 的<input type="range">.

我试图在这个 jsFiddle 中以较小的规模重现这个问题。它并不那么明显，但是当画布宽度约为可用宽度的 90% 时，它会发生在我身上。

代码会捕获requestAnimationFrame，并调整大小会擦除画布。我希望在绘制浏览器的框架之前调用渲染回调。情况似乎并非如此，因为在调整大小期间偶尔会显示白色背景。

有什么办法可以避免这种情况吗？

Answer 1

当您设置 canvas.width 或 canvas.height 时，它会清除画布，结合重绘这会导致您看到闪烁。

您可以通过在调整大小之前将画布保存到临时画布，然后再将其绘制回来，从而在合理的程度上缓解这种情况。

这是我的调整大小功能：

    function resize(width, height) {
        //Create temp canvas and context
        var tempContext = Utils.Canvas.Create2DContext(context.canvas.width, context.canvas.height);

        //Draw current canvas to temp canvas
        tempContext.drawImage(context.canvas, 0, 0);

        //Resize current canvas
        context.canvas.height = height;
        context.canvas.width = width;

        //Draw temp canvas back to the current canvas
        context.drawImage(tempContext.canvas, 0, 0);
    }

如果您调整到较小的尺寸，则临时画布会“过度绘制”，因此它将完全填满当前画布。但是，如果您调整到更大的尺寸，那么您的临时画布将只填充当前画布的一部分。未填充的部分在重绘时仍会闪烁。

如果您想变得更花哨，可以尝试绘制正确（最终）大小的临时画布，而不是简单地复制当前画布。这会更慢，但可以很好地消除所有闪烁。

在我的情况下，我正在调整大小以填充一个 div，所以沿着底部和右边缘有一点闪烁是可以容忍的，当然比整个闪烁要好得多。

编辑：

这是您的 jsFiddle 的更新，其中应用了我的更改：

jsfiddle.net/Uz5Pt/13

它似乎比我在我的应用程序中使用它的地方工作得更好！您几乎看不到任何新创建的画布上的任何闪烁。