javascript - 使用 JavaScript 设置 HTML5 canvas 显示属性使 canvas 不可见

Question

我正在用 HTML5 Canvas 和 JavaScript 制作游戏，我正在制作我的 Canvas :

<canvas id="gameCanvas" width="800" height="600"></canvas>

在我的 JavaScript 中:

var canvas;

function myFunction() {
    canvas = document.getElementById("gameCanvas");
    canvas.style.display = "block";
}

我希望我的 Canvas 在我运行 myFunction() 时出现，所以我有这个 CSS:

canvas {
    display: none;
}

但是，当我运行 myFunction() 时，我从我的游戏中听到了声音，这意味着 Canvas 在页面上，但是 Canvas 没有显示。即使我应用此 CSS:

canvas {
    display: none;
    border: 10px solid lime;
}

然后运行 ​​myFunction()，我在页面上看不到任何内容。我在这里做错了什么？还有什么我必须做的吗？

Answer 1

在页面加载时移除 css canvas {display: none;}

canvas = document.getElementById("gameCanvas");
canvas.style.display = "none";

当你调用函数时它会显示 block