本文介绍了放置< div>在< canvas>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在画布
元素中加入 div
,如下所示:
I take a div
within a canvas
element like following:
<canvas>
<div></div>
</canvas>
这两者都有高度和宽度。但是在这里我看不到 div
!
Here both of them has height and width. But here I can't see the div
!
>
推荐答案
你不能将元素放在画布中(同时显示);
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
<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的内容正常流动,内容:
Here's another technique, which lets the content of the div flow normally and makes the canvas a background to the content:
CSS
#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }
这篇关于放置< div>在< canvas>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!