使用javascript重叠画布一个div

Question

是否可以将画布和 div 组合在一起，我曾尝试将它们一起工作，但我无法让它工作

这是我的分区

    <div href="#" class="item" data-bind="draggable:true,droppable:true">
    <span data-bind="click:$parent.remove">[x]</span><br/><br/>
    <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
     </div>

这是画布

    <canvas id=demo width=400 height=300></canvas>

这里是完整的代码，不是我的请查看How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

Answer 1

您可以将两者放在容器中并使用绝对定位，如下所示：

<div id="container">

<canvas id=demo width=400 height=300></canvas>

<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>

</div>

然后在样式表中：

#container {
    position: relative;
}
#demo, div[href="#"] {
    position: absolute;
    top: 0px;
    left: 0px;
}