显示为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后重绘自己

    $(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），你可以立即利用它。