HTML5画布中的隐藏元素绘制无法正常工作。

Question

我试图在一个父元素设置为display:none的情况下在画布上绘制。有没有办法实现？

这里有一个jsFiddle演示我的问题：http://jsfiddle.net/kannix/jSj83/ 如果你只是点击“Draw”按钮，一切都会按预期工作。但如果你点击“Show/Hide”按钮并在隐藏时点击“Draw”按钮，那么再次点击“Show/Hide”按钮将显示画布，但它仍然是空白的。

- kannix

Answer 1

你可以使用CSS的visibility属性隐藏

，而不是使用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);

看起来是在清除绘图。

- Todd

Answer 2

您不能这样做。

虽然技术上存在，但画布不能以那种方式进行交互。不过，您可以在隐藏时指示画布绘制特定图像。只需确保在显示时不要将其清除。

不过，在隐藏时用户无法进行绘制操作。

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

- Jacques ジャック

---

该死，我忽略了清除画布，以为我可以在一个看不见的画布上绘画...所以似乎我的真实代码还有其他问题。 - kannix

Answer 3

以下是一些需要注意的问题，解决这些问题后代码将能正常运行：

• 不要在 #hideBtn.click 中清除画布
• 在 ctx.arc 之前使用 ctx.beginPath() 初始化路径
• 在操作时使用 jQuery <2.0 版本。

这里是代码和 Fiddle 链接：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();
});

- markE