以编程方式创建 HTML5 Canvas答案

【问题标题】：Create HTML5 Canvas programmatically以编程方式创建 HTML5 Canvas
【发布时间】：2018-12-11 06:33:09
【问题描述】：

我有以下 HTML 代码 sn-ps

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

它按预期工作。我可以正确显示输出。

然后我删除

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

因为我想用下面的 JavaScript 代码 sn-p 以编程方式创建它

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

不幸的是，它没有用。我不能用这个显示任何东西。

我想知道我是否错过了什么。任何帮助表示赞赏。提前感谢您的帮助。

【问题讨论】：

标签： html canvas

【解决方案1】：

您需要将新的<canvas> 元素插入到 DOM 中。要将其放在正文的末尾，请使用：

document.body.appendChild(canvas);

使用创建它的代码。（如果你想把它放在不同的元素中，使用它而不是 document.body。）

【讨论】：

【解决方案2】：

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

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

【讨论】：