有趣，关于动态创建canvas的问题？

Question

使用js创建canvas发现只有开始标签，没有闭合标签，刚开始我以为canvas是可以省略闭合标签的自闭合标签，但mdn上的解释却是：</canvas> 标签不可省与 <img> 元素不同，<canvas>元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。var canvas = document.createElement("canvas");document.body.appendChild(canvas);//这样创建出来却没有闭合标签，它不像创建div或者span这种一样会自动成对。这是什么情况呢？

Answer 1

是因为你没有理解mdn里面说的是什么意思。

与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

所谓的替代元素，是指当canvas不可用时，替代canvas的元素。也就是说如果不带结束标签，那么img标签及之后的所有元素都会被认为是替代元素，将不会被显示。

<canvas id="clock" width="150" height="150">

  <img src="images/clock.png" width="150" height="150" alt=""/>

</canvas>

如上，如果canvas不受浏览器支持，那么在这里显示的就是一个img标签。

你可以通过

var canvas = document.createElement("canvas");

var img = document.createElement("img");

canvas.appendChild(img);

document.body.appendChild(canvas);

来达到如上目的。

还有一个更有趣的点。

var canvas = document.createElement("canvas");

console.log(canvas.outerHTML)//<canvas></canvas>