Установка свойств отображения HTML5 с помощью JavaScript делает Canvas невидимым

Question

Я делаю игру на HTML5 Canvas и JavaScript, и я делаю свой холст так:

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

И в моем JavaScript:

var canvas;

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

И я хочу, чтобы мой холст появлялся при запуске myFunction(), поэтому у меня есть этот CSS:

canvas {
    display: none;
}

Однако, когда я запускаю myFunction(), я получаю звуки из своей игры, что означает, что холст находится на странице, однако холст не отображается. Даже если я применю этот CSS:

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

И запустить myFunction(), я ничего не вижу на странице. Что я здесь не так делаю? Есть ли что-то еще, что я должен сделать?

Answer 1

Вы проверяли, что делает ваш код ?, Я думаю, что display: block перезаписывается ни одним с! Важным или чем-то.

Если это так, измените код своего скрипта или попробуйте удалить перезаписывающий! Важный тег, когда он не нужен.

Надеюсь, это поможет.

Answer 2

удалить css canvas {display: none;} вместо загрузки страницы

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

и при вызове функции будет отображаться блок

Answer 3

Изменение в последнем блоке вашего кода. Вы используете display: none, который завершает холст

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