是因為你沒有理解mdn里面說的是什么意思。

與 <img> 元素不同，<canvas> 元素需要結(jié)束標(biāo)簽(</canvas>)。如果結(jié)束標(biāo)簽不存在，則文檔的其余部分會被認(rèn)為是替代內(nèi)容，將不會顯示出來。

所謂的替代元素，是指當(dāng)canvas不可用時，替代canvas的元素。也就是說如果不帶結(jié)束標(biāo)簽，那么img標(biāo)簽及之后的所有元素都會被認(rèn)為是替代元素，將不會被顯示。

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

如上，如果canvas不受瀏覽器支持，那么在這里顯示的就是一個img標(biāo)簽。

你可以通過

var canvas = document.createElement("canvas");
var img = document.createElement("img");
canvas.appendChild(img);
document.body.appendChild(canvas);

來達(dá)到如上目的。

還有一個更有趣的點。

var canvas = document.createElement("canvas");
console.log(canvas.outerHTML)//<canvas></canvas>