帆布不會隱藏？

Question

我的HTML5 Canvas元素似乎沒有隱藏。

我創建了一個計時器，當計時器達到0時應該隱藏該元素，我用一個警告標誌測試了這個，並且工作正常。

問題：

if (TotalSeconds <= 0) 
{ 
    ctx.clearRect(0, 0, canvas.width, canvas.height) 
} 

整個代碼：

// Create the canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas); 

// Background image 
var bgReady = false; 
var bgImage = new Image(); 
bgImage.onload = function() { 
    bgReady = true; 
}; 
bgImage.src = "images/background.png"; 

// Hero image 
var heroReady = false; 
var heroImage = new Image(); 
heroImage.onload = function() { 
    heroReady = true; 
}; 
heroImage.src = "images/hero.png"; 

// Monster image 
var monsterReady = false; 
var monsterImage = new Image(); 
monsterImage.onload = function() { 
    monsterReady = true; 
}; 
monsterImage.src = "images/flamingo.png"; 

// Game objects 
var hero = { 
    speed: 256 // movement in pixels per second 
}; 
var monster = {}; 
var monstersCaught = 0; 

// Handle keyboard controls 
var keysDown = {}; 

addEventListener("keydown", function (e) { 
    keysDown[e.keyCode] = true; 
}, false); 

addEventListener("keyup", function (e) { 
    delete keysDown[e.keyCode]; 
}, false); 

// Reset the game when the player catches a monster 
var reset = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 

    // Throw the monster somewhere on the screen randomly 
    monster.x = 32 + (Math.random() * (canvas.width - 64)); 
    monster.y = 32 + (Math.random() * (canvas.height - 64)); 
}; 

// Update game objects 
var update = function (modifier) { 
    if (38 in keysDown) { // Player holding up 
     hero.y -= hero.speed * modifier; 
    } 
    if (40 in keysDown) { // Player holding down 
     hero.y += hero.speed * modifier; 
    } 
    if (37 in keysDown) { // Player holding left 
     hero.x -= hero.speed * modifier; 
    } 
    if (39 in keysDown) { // Player holding right 
     hero.x += hero.speed * modifier; 
    } 

    // Are they touching? 
    if (
     hero.x <= (monster.x + 32) 
     && monster.x <= (hero.x + 32) 
     && hero.y <= (monster.y + 32) 
     && monster.y <= (hero.y + 32) 
    ) 
    { 
     ++monstersCaught; 
     reset(); 
    } 
    if (hero.x <= 0) 
    { 
     hero.x = 510 
    } 
    if (hero.y <= 0) 
    { 
     hero.y = 478 
    } 

}; 
CreateTimer(5); 
var Timer; 
var TotalSeconds; 


function CreateTimer(Time) { 
Timer = $("#timer").text(); 
TotalSeconds = Time; 

UpdateTimer() 
window.setTimeout("Tick()", 1000); 
} 

function Tick() { 
TotalSeconds -= 1; 
UpdateTimer() 
window.setTimeout("Tick()", 1000); 
} 

function UpdateTimer() { 
$("#timer").text(TotalSeconds); 

if (TotalSeconds <= 0) 
{ 
    ctx.clearRect(0, 0, canvas.width, canvas.height) 
} 
} 

// Draw everything 
var render = function() { 
    if (bgReady) { 
     ctx.drawImage(bgImage, 0, 0); 
    } 

    if (heroReady) { 
     ctx.drawImage(heroImage, hero.x, hero.y); 
    } 

    if (monsterReady) { 
     ctx.drawImage(monsterImage, monster.x, monster.y); 
    } 

    // Score 
    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Helvetica"; 
    ctx.textAlign = "left"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Flamingos slaughtered: " + monstersCaught, 32, 32); 
    ctx.textAlign = "right"; 
    ctx.textBaseline = "bottom"; 
    ctx.fillText("Time left: " + TotalSeconds, 150,32); 
}; 

// The main game loop 
var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    render(); 

    then = now; 
}; 

// Let's play this game! 
reset(); 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible 

的HTML只是<canvas></canvas>

漂亮的新本所以任何幫助，將不勝感激。

謝謝！

Answer 1

這不隱藏畫布，但疏通脈絡，這意味着它的明確的畫布

ctx.clearRect(0, 0, canvas.width, canvas.height); 

Answer 2

的繪製的圖形可以通過appying的CSS樣式它隱藏：

if (TotalSeconds <= 0) { 
    ctx.canvas.style.display = 'none'; 
} 

並再次將其顯示爲block或inline-block而不是none。

如果你想隱藏它，但保持它的空間，你可以使用：

ctx.canvas.style.visibility = 'hidden'; 

你也可以完全從DOM樹中刪除它通過使用：

parent.removeChild(canvasElement); 

其中parent是容器元素（例如您現在使用的document.body）和canvasElement是一個參考是您的畫布。

所有的說法 - 如果你只想清除畫布，那麼你需要停止你正在運行的循環。你可以使用例如一個標誌來做到這一點：

function Tick() { 
    TotalSeconds--; 
    UpdateTimer(); 
    if (TotalSeconds > 0) setTimeout(Tick, 1000); // only loop if sec > 0 
} 

然後清除它，因爲你已經做了。

希望這會有所幫助！