在html5画布上添加ul li图像

Question

我在li标记中有三个ul标记，每个标记都包含一个图像。我有一个canvas标签。我试图将ul置于canvas内，但之后，没有任何内容出现。这是我的代码。

<canvas>
  <ul>
    <li><img src="1.jpg" /></li>
    <li><img src="2.jpg" /></li>
    <li><img src="13.jpg" /></li>
  </ul>
</canvas>

当我将ul放在外面时，一切都会显现出来。我想在ul中显示整个canvas。可能吗？如果可能的话怎么样？谢谢！

Answer 1

HTML元素不能放在canvas元素中（并且应该显示在其中）。它们将被解释为文本，并在浏览器不支持画布元素时显示

话虽如此，你可以将元素分层到可能与你想要达到的目标相似的位置。

如果您使用相同的尺寸，则top＆amp; left位置，并且都有position:absolute，您可以在HTML中将您想要的元素放在另一个上面。在演示中，我将画布放在ul之后，因此它位于顶部

ul, canvas {
    position:absolute;
    top:0; left:0;
    width:100px; height:100px;
}

Demo

使用相同的技术，您可以通过赋予它更高的z-index值使其显示在另一个之上，而不管它在HTML中的位置如何。 Demo using z-index