放置一个 <div>在 <canvas> 中 [英] Placing a <div> within a <canvas>

问题描述

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

<div></div></画布>

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

在canvas 中是否不能使用div 或p?

解决方案

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

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

HTML

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

CSS

#canvas-wrap { position:relative }/* 使其成为定位的父级 */#overlay { 位置:绝对；顶部:20px；左:30px；}

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

CSS

#canvas-wrap { position:relative;宽度:800px；高度:600px }#canvas-wrap canvas { 位置:绝对；顶部:0；左:0;z-索引:0 }

I take a div within a canvas element like following:

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

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

Is it not possible to take a div or p within a canvas?

解决方案

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; }

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> 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！