帆布不会隐藏？

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 
} 

然后清除它，因为你已经做了。

希望这会有所帮助！