Question

我正在使用kinetic.js在画布上不断绘制一些线条，我希望在此画布的顶部显示div文本。使用relative和absolute技巧我可以在画布中间放置一个div，但问题是我不断画线，这些线条是在我的div文本之上绘制的，我不这样做想要发生！

基本模板：

    <div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
        greatTexts
   </div>

   <div id="container" style="position: relative; width: 100%; height: 100%;">
   <canvas></canvas> 
   </div>

Answer 1

我相信您也可以在z-index和#container上设置#div-text值。像这样：

<div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;z-index:999;">
        greatTexts
   </div>

  <div id="container" style="position: relative; width: 100%; height: 100%;z-index:990;">
     <canvas id="myCanvas" height="500" width="500"></canvas> 
   </div>

This显示了一个示例。

Answer 2

如果画布默认为空，则表示您可以看到它背后的元素。

由于您在<div>之前放置了<canvas> 之前的<div>，因此<canvas>在<{strong> <{strong> 1}}。

解决方案？将div转换一点：

<div> <canvas style="position:absolute; width:100%; height:100%; background:red"></canvas> <div id="div-text" style="background-color:#00baba; position:absolute; margin-top:50%; margin-left:50%;"> greatTexts </div> </div>

Answer 3

只需将div放在容器div之后的文本

   <div id="container" style="position: relative; width: 100%; height: 100%;">

   <div id="div-text" style="background-color:#00baba; position: absolute; margin-top: 50%; margin-left: 50%;">
        greatTexts
   </div>

没有必要创建一个canvas元素，因为正如你所提到的，KineticJS会自动为你创建它们。

使div始终位于总是写东西的画布上

3 个答案: