以编程方式创建HTML5 Canvas

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