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

Question

我正在使用画布创建绘图应用程序.如果显示包含canvas元素的div,它可以正常工作.但是,我想最初隐藏包含div,然后使用jquery转换"启动"绘图应用程序以淡入绘图界面.所以包含div最初将其css'display'属性设置为'none',然后我显示它.但是,当我这样做时,canvas元素将不再接收任何绘图输入.我尝试在我的脚本渲染canvas元素之后动态设置display: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>

然后调用此函数,它将canvas元素创建为"draw"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();
});

最后,这是绘图功能:

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;

}

现在,如果我保持一切相同,但只是从样式表中删除'display:none;',以便在页面加载时显示画布,一切正常.但如果它被隐藏然后显示,则无法绘制在上面.

Answer 1

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

你能使用visibility:hidden而不是display:none吗？那样,元素一直存在于页面上,肉眼看不到？

当你希望它再次可见时,只需写

  visibility:visible;

或者在你的代码中

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