Html 在 <canvas> 中放置一个 <div>

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5763911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:10:56  来源:igfitidea点击:

Placing a <div> within a <canvas>

htmlcanvas

提问by thecodeparadox

I take a divwithin a canvaselement like following:

div在一个canvas元素中取一个,如下所示:

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

Here both of them has height and width. But here I can't see the div!

这里它们都有高度和宽度。但是在这里我看不到div

Is it not possible to take a divor pwithin a canvas?

不能在 adivpin 内使用canvas吗?

回答by Phrogz

You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.

您不能将元素放置在画布内(并且两者都显示);它们仅在浏览器不理解画布元素时显示。

If you would like to position elements over the same area as a canvas, here is one technique (among many) that would let you do it:

如果您想将元素放置在与画布相同的区域上,这里有一种技术(其中很多)可以让您做到这一点:

HTML

HTML

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

CSS

CSS

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

Here's another technique, which lets the content of the div flow normally and makes the canvas a background to the content:

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

CSS

CSS

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