在隐藏的 html5 画布元素中绘制不起作用

Question

我试图在画布中绘制，而其父级是display:none. 有没有办法做到这一点？

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

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

Answer 1

您可以使用 cssvisibility属性来隐藏 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);

似乎正在清除绘图。

Answer 2

你不能这样做。

画布虽然从技术上讲是存在的，但无法以这种方式进行交互。但是，您可以指示画布在隐藏时绘制特定图像。只要确保显示时没有清除它即可。

不过，当它隐藏时，用户无法绘图。

如果您只是希望绘制的内容在单击显示/隐藏后保持可见，请ctx.clearRect(0, 0, 100, 100);从 jQuery 中删除。