我在调整动画画布控件的大小时观察到一些闪烁。
您可以在at this page 中看到它。左右拖动 'width' 滑块，亲自尝试一下。我在 Linux 上运行的 Chrome 26.0.1410.43 中看到了这种闪烁。目前此页面在支持 HTML5 的 <input type="range"> 之前无法在 Firefox 中运行。
我已尝试在this jsFiddle 中以较小的规模重现该问题。它不那么明显，但是当画布大约是可用宽度的 90% 时会发生这种情况。
代码捕获requestAnimationFrame，调整大小会擦除画布。我希望在绘制浏览器的框架之前调用渲染回调。情况似乎并非如此，因为在调整大小时偶尔会出现白色背景。
有什么办法可以避免这种情况吗？
【问题讨论】：
标签： html canvas html5-canvas flicker
当您设置 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 的更新，其中应用了我的更改：
它似乎比我在我的应用程序中使用它更好！您几乎看不到任何新创建的画布上的任何闪烁。
【讨论】：
draw 函数重绘了整个事情。问题似乎是浏览器调整大小、清除、绘制，然后调用我的重绘，然后再次绘制。您是否尝试过增加我的 jsFiddle 中的滑块？
您可以尝试使用双缓冲区。这是一篇不错的文章，介绍了您可以尝试的一些技术：
【讨论】：