jqueryの表示遷移後にキャンバス要素を描画することはできません

Question

キャンバスを使用して描画アプリケーションを作成しています。 canvas要素を含むdivが表示されていればうまく動作します。しかし、私は最初に含まれているdivを非表示にしてから、jqueryトランジションを使用して描画アプリケーションを「起動」して、描画インターフェイスをフェードインさせたいと考えています。だから、含まれているdivは、最初にそのCSSの 'display'プロパティが 'none'に設定されていて、それを表示します。しかし、これを行うと、キャンバス要素は描画入力を受け取らなくなります。私はディスプレイを設定しようとしました。キャンバス要素がスクリプトによってレンダリングされた後は、動的には何も表示されませんでした。助言がありますか？そして、この関数は

<!--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要素の子としてcanvas要素を作成します：ここで

は、描画インタフェースのためのHTML構造である

//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; 

}

：描画機能ですすべて正常に動作します。しかし、それが隠されて表示されている場合、それを描くことはできません。

Answer 1

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

display：noneの代わりにvisibility：hiddenを使用できますか？そうすれば、要素は肉眼では見えないページ上に存在し続けるでしょうか？あなたはそれだけで

visibility:visible; 

またはあなたのコード内で

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