Question

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

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

如果你只是点击绘图，一切都按预期工作。如果单击“显示/隐藏”并隐藏，则单击“绘制”按钮，单击“显示/隐藏”将显示画布，但其仍为空。

Answer 1

你做不到。

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

用户无法在隐藏时进行绘制。

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

Answer 2

一些问题，然后它适合您：

请勿在＃hideBtn.click
使用ctx.beginPath（）在ctx.arc
在摆弄时使用jQuery＆lt; 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();
});

Answer 3

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

似乎正在清理图纸。

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

3 个答案: