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

Question

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

3

我正在使用Canvas创建一个绘图应用程序。如果包含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>

然后调用此函数，它将创建画布元素作为“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;"，使得画布在页面加载时显示出来，那么一切都能正常工作。但是如果它被隐藏然后显示出来，你就无法在上面绘制。

- pixielex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Downpour046 · Accepted Answer

 #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');
});