Question

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

您可以在行动at this page中看到它。左右拖动'width'滑块以自行尝试。我在Linux上运行的Chrome 26.0.1410.43中看到了这种闪烁。目前，只有在支持HTML5的<input type="range">。

之前，此页面才能在Firefox中使用

我试图在this 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

它似乎比我在我的应用程序中使用它更好！你几乎看不到任何新创建的画布闪烁。

Answer 2

您可以尝试使用双缓冲区。这是一篇关于你可以尝试的一些技巧的好文章：

http://www.html5rocks.com/en/tutorials/canvas/performance/

在调整HTML5画布大小时闪烁

2 个答案: