Question

У меня есть следующие фрагменты кода HTML

<body onload="main()" >
    ...
    <canvas id="myId" class="myClass"></canvas>
    ...
</body>

Работает как положено. Я могу правильно отобразить вывод.

я потом удаляю

<canvas id="myId" class="myClass"></canvas>

Поскольку я хочу создать его программно с помощью следующего фрагмента кода JavaScript

var canvas = document.createElement("canvas");
canvas.className  = "myClass";
canvas.id = "myId";

К сожалению, это не сработало. Я ничего не могу отобразить с этим.

Мне интересно, что я что-то упустил? Любая помощь приветствуется. Заранее благодарим за помощь.

Sophie Alpert · Answer 1 · 22 января 2011

Вам необходимо вставить новый элемент <canvas> в DOM. Чтобы положить его в конце тела, используйте:

document.body.appendChild(canvas);

с кодом, который его создает. (Если вы хотите поместить его в другой элемент, используйте его вместо document.body.)

Matt Ball · Answer 2 · 22 января 2011

Вам необходимо прикрепить холст к документу. Прежде чем вы это сделаете, это просто отдельный элемент, который браузер не отображает.

var canvas = /* ... */;
/* ... */
document.getElementsByTagName('body')[0].appendChild(canvas);

Создайте HTML5 Canvas программно

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.