在調整大小的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畫布時閃爍

回答

相關問題