Javascript 显示为“无”的div中的画布不起作用

我对canvas元素有问题。当它位于隐藏的div中并且该div处于切换状态时，它不会显示。这里有更好的解释和例子

---

这在ff和chrome中发生（其他未测试）。有谁能告诉我为什么/如何克服这个问题。

问题是动态图检测到div的宽度/高度为0/0，并且在重新绘制之前不会了解其他情况（当单个DOM元素调整大小时不会触发JS事件）

最简单的解决方法是显式地让动态图知道它应该更新其大小，并在使用

g.resize（）切换div之后重新绘制自己

我更新了你的JSFIDLE
我刚刚在Chrome37.0.2062.124 m中遇到了这个问题，与OP问题中描述的问题相匹配。然而，我并没有使用任何特定的图形库，只是将图形绘制到画布上。我已经在重新绘制画布时，封闭DIV的大小发生了变化

我发现，如果画布的宽度或高度设置为零，它将变得不可靠。下次将“宽度”和“高度”设置为非零值时，立即在其上绘制的任何图形都将被忽略，即使其宽度和高度现在为非零，并且可以在Chrome调试器的元素树中看到（并在页面中突出显示悬停）

因此，除了benni_Macu_b答案中的建议外，您必须：


使用
setTimeout
或类似的延迟在画布上绘制，这样在设置宽度/高度后不会立即进行，或者
确保从未将画布设置为零宽度/高度。确保它至少为1像素

为了简单起见，我选择了后者，它解决了这个问题

总之：

刚从（0，0）增长到（1000，1000）的画布无法立即绘制-它会忽略所有绘制说明。但是，如果它刚刚从（1，1）增长到（1000，1000），你可以立即利用它。
谢谢你，这让我发疯了。我只需要找出一种方法来实现这一点，因为我正在动态生成图表，但不知道“g”实际上是什么。它成功了，对于其他任何正在动态地进行此操作的人，我使用html5数据属性，并最终得到了
    $(document).ready(function(){
      $('.click').click(function(){
        $('#hidden').toggle();
        g.resize();
      });
    });