顯示為none的div中的畫布不起作用

Question

我遇到了canvas元素的問題。 它沒有顯示它何時在隱藏的div中並且div被切換。 更好的解釋和例子在這里

http://jsfiddle.net/78sJT/10/

這種情況發生在ff和chrome（未測試其他人）。 誰能告訴我為什么/如何克服這個問題。

Answer 1

問題是dygraphs將div的寬度/高度檢測為0/0，並且在重新繪制之前不會另外學習（沒有JS事件在單個DOM元素調整大小時觸發）。

最簡單的解決方法是明確地讓dygraph知道它應該更新它的大小並在使用g.resize();切換div之后重繪它自己g.resize();

    $(document).ready(function(){
      $('.click').click(function(){
        $('#hidden').toggle();
        g.resize();
      });
    });

我更新了你的jsfiddle http://jsfiddle.net/78sJT/13/

Answer 2

我剛剛在Chrome 37.0.2062.124 m中遇到此問題，與OP問題中描述的問題相符。 但是，我沒有使用任何特定的圖形庫，只是繪制到畫布。 當封閉的DIV尺寸發生變化時，我已經重新繪制了畫布。

我發現如果畫布的寬度或高度設置為零，它就變得不可靠。 下次將寬度和高度設置為非零值時，將立即忽略您在其上執行的任何繪制，即使其寬度和高度現在為非零並且可以在元素樹中看到（並且懸停 - 在Chrome的調試器中，在頁面中突出顯示）。

所以除了benni_mac_b答案中的建議外，您還必須：

• 使用setTimeout或類似的方法來延遲畫布上的繪圖，因此在設置寬度/高度后不要立即執行，或者
• 確保您從未將畫布設置為零寬度/高度。 確保它至少為1像素。

我為了簡單起見，后來解決了這個問題。

綜上所述：

剛剛從（0,0）到（1000,1000）增長的畫布無法立即繪制 - 它會忽略所有繪圖指令。 但如果它剛剛從（1,1）增長到（1000,1000），你可以立即利用它。