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

Question

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

这里是一个的jsfiddle证明我的问题： http://jsfiddle.net/kannix/jSj83/

如果你只需点击抽奖，一切正常。如果在隐藏时单击显示/隐藏，单击绘图按钮，单击显示/隐藏将显示画布，但仍然为空。

Answer 1

你不能那样做。

画布，虽然技术上在那里，不能以这种方式进行交互。但是，您可以指示画布在隐藏时绘制特定图像。只要确保在展示时不清除它。

用户虽然被隐藏但不能绘制。

如果您只是想要点击显示/隐藏后保持可见状态，请从您的jQuery中删除ctx.clearRect(0, 0, 100, 100);。

Answer 2

您可以使用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); 

看来天要放晴了图纸。

Answer 3

的几个问题，然后为你的作品：

• 不要清除＃hideBtn.click
• 使用ctx.beginPath（）画布初始化ctx.arc之前的路径
• 使用jQuery < 2.0时候摆弄。

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/X7pcm/

var ctx = $('#cnv')[0].getContext('2d'); 

$('#hideBtn').click(function() { 
    $('#hider').toggle();   

}); 

$('#drawBtn').click(function() { 
    ctx.beginPath(); 
    ctx.arc(50, 50, 15, 0, 2*Math.PI); 
    ctx.fillStyle = '#000000'; 
    ctx.fill(); 
});