在jquery顯示轉換後無法繪製畫布元素

我正在使用畫布創建繪圖應用程序。如果顯示包含canvas元素的div，它會正常工作。但是，我想最初隱藏包含的div，然後使用jquery轉換「啓動」繪圖應用程序以淡入繪圖界面。因此，包含div最初將其「顯示」屬性設置爲「無」，然後顯示它。但是，當我這樣做時，canvas元素將不再接收任何圖形輸入。我已經嘗試設置顯示：在我的腳本呈現canvas元素之後動態地設置none，以確保沒有干擾，但沒有骰子。有什麼建議麼？在jquery顯示轉換後無法繪製畫布元素

這裏是繪圖接口的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;

}

現在，如果我把一切都一樣，但只是刪除了「顯示：無;」從樣式表使加載頁面時顯示在畫布上，一切正常。但是如果它被隱藏然後顯示出來，你就無法繪製它。

來源

2012-02-09 pixielex

您能否給我們一些代碼？ – Delta 2012-02-10 01:30:51

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

來源

2012-02-10 15:46:43 Downpour046

在我的回答中增加了一點點 – Downpour046 2012-02-10 15:50:43

謝謝，工作！對於需要此功能的其他人來說，這應該是「可見的」，而不是「可見的」。 – pixielex 2012-02-10 20:23:00

對不起，錯了 - 請檢查我，如果答案是正確的。謝謝！我更新了代碼，使其可見 – Downpour046 2012-02-10 20:25:18

在jquery顯示轉換後無法繪製畫布元素

回答

相關問題