canvas.style.display =「block」不起作用

我無法解釋爲什麼下面的「buttonHandler」函數中的第一行不起作用，畫布在此語句後不顯示。然而，「startPlay」函數的第一行是相同的，並顯示畫布！如果有人能看到爲什麼從這段代碼請讓我知道..canvas.style.display =「block」不起作用

謝謝。

我已經在Chrome和Firefox中試過這個，結果相同。

function buttonHandler(){ 
    canvas.style.display = "block"; 
    var menuDisplay = document.getElementById("menuDisplay"); 
    menuDisplay.style.display = "none"; 

    drawingSurface.font = readyDisplay.font; 
    drawingSurface.fillStyle = readyDisplay.fillStyle; 
    drawingSurface.textBaseline = readyDisplay.textBaseline; 
    drawingSurface.fillText(readyDisplay.text, readyDisplay.x, readyDisplay.y); 
    window.setTimeout("startPlay()", 3000); 
} 

function startPlay(){ 
    canvas.style.display = "block"; 
    gameOver.style.display = "none"; 
    balls=[]; 
    for(var i=0;i < sprites.length; i++){ 
     var thisSprite = sprites[i]; 
     if(thisSprite !== cup){ 
      removeObject(thisSprite, sprites); 
     } 
    } 
    score = 0; 
    totalSeconds = 5; 
    gameState = PLAYING; 
    drawingSurface.clearRect(0, 0, canvas.width, canvas.height); 
    window.setTimeout("tick()", 1000); // Start the countdown timer 
    timeToBall = Math.floor(Math.random() * 250) + 50; 
    update(); 
}

來源

2014-02-23 Paris

需要完整的代碼才能看到。 Jsfiddle適合我們。 – Papa

絕對不要在字符串中使用'setTimeout' /'setInterval'，因爲那時它們會使用邪惡的'eval'！改用一個函數的引用（'setTimeout（tick，1e3）'） – Oriol

你怎麼知道畫布沒有顯示？ –

您可能正在頁面中的window.onload事件中運行您的代碼。

當你調用一個setTimeout這樣一個弦函數：

window.setTimeout("startPlay()", 3000); // just a string reference

的startPlay()將全球window對象進行評估，這意味着範圍不會有當時訪問startPlay()它將被評估，因爲該功能是onload呼叫的功能的子代，因此從window範圍不可訪問。

Live example here（什麼都不會發生，但看看代碼）

通過改變setTimeout()使用函數引用這將作爲該功能可在基準是時間（子作用域訪問到父範圍的內部工作，但不是vica）。

這裏的函數引用自身將被轉移到超時事件的回調，而不是字符串參考：

window.setTimeout(startPlay, 3000); // now we have an actual function reference

這同樣適用於其他實例，以及（這也是更安全）。

Live working example（幾乎相同的代碼，只是直接函數參考）

希望這有助於！

來源

2014-02-24 03:36:07 K3N

canvas.style.display =「block」不起作用

回答

相關問題