在jquery显示转换后无法绘制画布元素

Question

我正在使用画布创建绘图应用程序。如果显示包含canvas元素的div，它会正常工作。但是，我想最初隐藏包含的div，然后使用jquery转换“启动”绘图应用程序以淡入绘图界面。因此，包含div最初将其“显示”属性设置为“无”，然后显示它。但是，当我这样做时，canvas元素将不再接收任何图形输入。我已经尝试设置显示：在我的脚本呈现canvas元素之后动态地设置none，以确保没有干扰，但没有骰子。有什么建议么？

这里是绘图接口的HTML结构：

<!--DRAWING INTERFACE--> 
    <style> 
     #draw-container { 
     display:none; 
     width:1920px; 
     height:1080px; 
     position:absolute; 
     top:0px; 
     left:0px; 
     } 
    </style> 
<div id="draw-container"> 
    <h1>Send a Drawing</h1> 
    <div id="draw" class="panel"> 
    </div> 
    <div id="draw-buttons"> 
     <a id="sendButton" href="#" class="round">></a> 
     <a id="clearButton" href="#" class="round">+</a> 
    </div> 
</div> 

那么这个函数被调用，它创建画布元素作为“画”的div孩子：

//creating canvasses 
function drawCanvas(id,xOffset){ 
    //draw 
    var canvas = document.createElement("canvas"); 
    canvas.width = canvasWidth; 
    canvas.height = canvasHeight; 
    canvas.id = id; 
    $('#draw').append(canvas); 
} 

而且当用户点击按钮以显示绘图模块时：

document.getElementById('drawLaunch').addEventListener("click", function(){ 
    $('#draw-container').show(); 
}); 

最后， S中的绘图功能：

function _drawCircle(mouseX, mouseY) { 
//get position 
var x = mouseX - offsetLeft, 
    y = mouseY - offsetTop; 
//move mouse to the previous point 
if (lastX == null) { 
    lastX = x; 
    lastY = y; 
} 
context.moveTo(lastX,lastY); 
//draw line 
context.lineTo(x, y); 
context.stroke(); 
//set new last point 
lastX = x; 
lastY = y; 

}

现在，如果我把一切都一样，但只是删除了“显示：无;”从样式表使加载页面时显示在画布上，一切正常。但是如果它被隐藏然后显示出来，你就无法绘制它。

Answer 1

#draw-container { 
    visibility:hidden; 
    width:1920px; 
    height:1080px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    } 

你可以使用可见性：隐藏而不是显示：无？这种方式元素保持在肉眼看不到的页面上？

当你希望它是可见的再随便写

visibility:visible; 

或者在你的代码

document.getElementById('drawLaunch').addEventListener("click", function(){ 
    $('#draw-container').css('visibility','visibile'); 
});