4

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

您可以在此页面上看到它的实际效果。左右拖动“宽度”滑块亲自尝试。我在 Linux 上运行的 Chrome 26.0.1410.43 中看到了这种闪烁。目前该页面在 Firefox 中无法运行，直到它支持 HTML5 的<input type="range">.

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

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

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

4

2 回答 2

5

当您设置 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

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

于 2013-05-16T08:42:20.993 回答
0

您可以尝试使用双缓冲区。这是一篇不错的文章，介绍了您可以尝试的一些技术：

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

于 2013-04-03T23:03:03.850 回答