在<canvas>中放置<div>

Question

我div在一个canvas元素内部如下:

<canvas>
    <div></div>
</canvas>

这里两个都有高度和宽度.但在这里我看不到div!

是不是可以在一个div或p一个内canvas？

Answer 1

你不能在画布中放置元素(并且都显示); 只有在浏览器不理解canvas元素时才会显示它们.

如果你想将元素放在与画布相同的区域上,这里有一种技术(在众多中)可以让你这样做:

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Make this a positioned parent */
#overlay     { position:absolute; top:20px; left:30px; }

这是另一种技术,它允许div的内容正常流动并使画布成为内容的背景:

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }