html - 在隐藏的 html5 canvas 元素中绘制不起作用

Question

我试图在 Canvas 上绘制，而它的父级是 display:none。有没有办法做到这一点？

这是一个 jsFiddle 来演示我的问题: http://jsfiddle.net/kannix/jSj83/

如果您只是点击绘制，一切都会按预期进行。如果您单击“显示/隐藏”并在隐藏时单击“绘制”按钮，单击“显示/隐藏”将显示 Canvas ，但它仍然是空的。

Answer 1

您可以使用 css visibility 属性来隐藏 div 而不是使用 display

例子:

$('#hideBtn').click(function () {
    var hider = $('#hider');
    if(hider.css('visibility') == 'visible') {
        hider.css('visibility', 'hidden');
    }
    else {
        hider.css('visibility', 'visible');
    }
});

还有这一行:

ctx.clearRect(0, 0, 100, 100);

似乎是在清除绘图。