Google Chrome - context.canvas.width/context.canvas.width導致「藍色圖層」

我今天從Chrome版本17升級到Chrome：18.0.1025.142。Google Chrome - context.canvas.width/context.canvas.width導致「藍色圖層」

我注意到我正在使用的一個網絡應用程序有一個奇怪的藍色圖層，它在加載時出現，然後在開始滾動時消失。

我已經在我的JS追蹤這歸因於以下幾行：

   context.canvas.width = canWidth; 
       context.canvas.height = canHeight;

canWidth和canHeight是動態生成的。

將這些行註釋掉會停止呈現藍色圖層，但這不是一個解決方法，因爲我需要使用動態生成的值來控制畫布寬度/高度。

我還試圖將context.canvas.width和context.canvas.height硬編碼爲600，這也產生了藍色層問題。

這在以前版本的Chrome中不是問題，我在FireFox中沒有任何問題。

關於這個問題可能有什麼建議？

編輯：

這裏的代碼，其中上述駐留（nodeLeft和nodeTop被其他地方產生）塊：

   context.clearRect (0 , 0 ,canWidth, canHeight); 
       context.canvas.width = canWidth; 
       context.canvas.height = canHeight;         
       context.beginPath(); 
       context.moveTo(x, y); 
       context.lineTo(nodeLeft, nodeTop); 
       context.strokeStyle = "#000000"; 
       context.lineCap = "round"; 
       context.stroke();

來源

2012-04-03 ctdeveloper

你上載或鼠標移動做一次添加的代碼/鼠標鬆開？加載時爲 – 2012-04-04 13:44:17

，然後在拖動節點時繼續進行鼠標移動。 – ctdeveloper 2012-04-05 18:13:12

調整畫布的大小比寫入畫面要慢很多。如果你在鼠標移動時這樣做，那可能是問題所在。設置完畫布大小後，您只需清除畫布大小的矩形即可。 – 2012-04-05 19:29:50

編輯：

好吧，我知道了我。這似乎是一些AMD顯卡的問題。我可以在催化劑控制中心關閉鉻的高性能模式。這爲我解決了大部分煩人的事情......希望它能在下一個版本中修復。

如需更多信息，請參見：http://code.google.com/p/chromium/issues/detail?id=121658

這不是一個解決方案，但我面臨同樣的問題，它的駕駛我堅果。我試圖把它釘死。

問題：我已經在不同的機器上測試不同的充瀏覽器

藍層（我只看到他們，如果瀏覽器未最大化）
錯位Ÿ滾動條（有時只顯示了，如果我通過標籤切換）
扭曲的形狀。畫布的大小和繪製的圖像/形狀因Chrome而異。意思是，Chrome上的畫布/形狀比較小，它大多縮小了寬度。

結論1： 它似乎不適用於Chrome 18.x.x.每臺機器上發生似乎是一個硬件問題，但實際上不能限制它。

結論2： 如果我將畫布的大小設置爲200高度/寬度，則不會出現問題。如果將其設置爲高於200，則會使畫布/矩形變形並出現其他問題。

結論3： 的問題，只顯示瞭如果事情是drawed到畫布或某項設置，即填充樣式。

這裏測試片段我用：

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas> 
... 
ctx.fillRect (10, 10, 55, 50);

來源

2012-04-17 22:45:58

感謝您的更新。看起來像你所建議的硬件問題。 – ctdeveloper 2012-04-30 14:22:25

你能比你所提供的兩行發佈更多的代碼？我相信這比你設置寬度/高度更重要。

我有一個繪圖應用程序，我一直在擺弄和關閉一段時間，其中我做了很多相同的事情。唯一的區別是我在設置寬度和高度之前先調用context.scale(0,0);。我在任何帶有藍色疊加層的Google Chrome版本中都沒有問題。在設置寬度和高度之前，您是否可以修改上下文的比例值？

例如這裏就是我有，設置畫布文檔寬度/高度完整的文檔繪圖區域：

context.scale(0,0); 
context.canvas.width = $(document).width(); 
context.canvas.height = $(document).height();

編輯：提到我的修修補補的網站是在http://drawcomix.com如果你想測試藍色覆蓋，看它是否是你的瀏覽器或您的代碼。

編輯：根據您的附加評論...

我見過的建議清除畫布的最佳方式在網絡上的教程是設置高度/寬度。這並非完全正確。在文檔加載，它可能是這樣做的最快/最簡單的方法，但在鼠標移動，你可能會更好做這樣的事情：

context.save(); 
context.setTransform(1,0,0,1,0,0); 
context.clearRect(0,0,width,height); // width/height of canvas 
context.restore();

你可能不需要setTransform如果你不執行畫布上的任何轉換。

我相信我在Pro HTML5編程（Apress）中找到了這個解決方案，但我不確定。

來源

2012-04-03 20:23:31

沒問題我會在上面添加它！ – ctdeveloper 2012-04-04 12:11:44

謝謝你，我會試試看！ – ctdeveloper 2012-04-11 20:21:51

Google Chrome - context.canvas.width/context.canvas.width導致「藍色圖層」

回答

相關問題