在调整大小的HTML5画布时闪烁

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

你可以看到它的行动at this page。拖动'宽度'滑块左右自己尝试。在Linux上运行的Chrome 26.0.1410.43中，我看到了这种闪烁现象。目前此页面在Firefox中无法使用，除非它支持HTML5的<input type="range">。

我试图在this jsFiddle的较小规模上重现此问题。这并不是显而易见的，但是对于我来说，当画布的宽度大约是可用宽度的90％时会发生这种情况。

代码陷阱，并调整大小抹布的画布。我希望在浏览器的框架被绘制之前调用回调函数。这似乎并非如此，因为白色背景偶尔会在调整大小期间显示。

有什么可以做的，以避免这种情况？

来源

2013-04-03 Drew Noakes

当您设置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-16 08:42:20 AndyJ

感谢您的回答。我不确定这与我正在做的事情有什么不同，因为我在调整大小后通过我的'draw'函数重绘了整个事物。问题似乎是浏览器调整大小，清除，绘制，然后调用我的重绘，然后再绘制。你有没有尝试增加我的jsFiddle中的滑块？ – 2013-05-16 17:30:44

嗨德鲁，我冒昧地将我的修复应用到你的jsFiddle。 http://jsfiddle.net/Uz5Pt/13/希望它会适合你想要的！ – AndyJ 2013-05-17 15:53:43

谢谢，这看起来不错。我会进一步看看尝试，看看为什么这样的作品，但我的代码没有。你能告诉？如果您将滑块拖动到零，您的小提琴也会中断:) – 2013-05-17 16:14:28

您可以尝试使用双缓冲区。这里有一些技术不错的文章，你可以尝试：

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

来源

2013-04-03 23:03:03 jusynth

你试过这个吗？我没有，但我认为它不会有帮助。当高度/宽度改变时，浏览器重置画布，并且在画布被重绘之前，浏览器渲染似乎发生。我不明白双缓冲将如何帮助。这是一篇不错的文章，谢谢。 – 2013-04-04 11:44:33

具体不，但是你的问题似乎是因为你必须强制重画。部分画布规范指出：“当创建画布元素时，随后设置宽度和高度属性（无论是新值还是之前的值），位图和任何关联的上下文都必须清除回初始值状态并使用新指定的坐标空间尺寸重新初始化 “您可以尝试通过制作具有新属性的第二个画布并销毁旧属性来避免重绘问题。 – jusynth 2013-04-10 00:45:15

在调整大小的HTML5画布时闪烁

回答

相关问题