1

を使用してキャンバスにいくつかの線を継続的に描画してkinetic.jsおり、このキャンバスの上にdiv-textを表示したいと思います。トリックを使用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>
4

3 に答える 3

2

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>

これは例を示しています。

于 2013-01-30T15:14:35.447 に答える
0

デフォルトで空の場合、キャンバスの背後にある要素を見ることができます。

コードでは、 の<div> 前にyour を配置したため、 は の下にレンダリングされます。<canvas><div><canvas>

解決？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>
于 2013-01-30T15:09:40.267 に答える
0

このようにコンテナ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>

前述のように、KineticJS が自動的にキャンバス要素を作成するため、キャンバス要素を作成する必要はありません。

于 2013-02-06T04:15:17.897 に答える