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";

不幸的是，它没有用。我无法用它来展示任何东西。

我想知道我是否想念一些东西。任何帮助表示赞赏。在此先感谢您的帮助。

Answer 1

您需要将新的<canvas>元素插入DOM。要将它放在身体的末端，请使用：

document.body.appendChild(canvas);

使用创建它的代码。（如果要将其放在不同的元素中，请使用它而不是document.body。）

Answer 2

您需要将画布实际附加到文档。在您这样做之前，它只是浏览器无法呈现的分离元素。

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

Answer 3

const canvas = document.createElement("CANVAS");