kineticjs 画布与另一个画布重叠

【问题标题】：kineticjs canvas overlapping another canvaskineticjs 画布与另一个画布重叠
【发布时间】：2013-12-26 23:27:33
【问题描述】：

我正在尝试构建一个使用 KineticJS 重叠另一个元素的应用程序。理想情况下，后台应用程序可能只是另一个包含照片的 div，或者像 Google 地图这样复杂的东西。

我想要完成的是一个概念证明，我基本上可以拥有一个 KineticJS 画布，它与另一个元素重叠并允许它与另一个元素重叠，但所有输入仅直接转到 KineticJS 对象。

有什么想法吗？

【问题讨论】：

标签： javascript css canvas html5-canvas kineticjs

【解决方案1】：

HTML：

<div id="wrapper">
    <canvas id="canvasBottom" width=300 height=200></canvas>
    <div id="container" width=300 height=200></canvas>
</div>

将 Kinetic 容器 div 直接放在画布元素上的 CSS

#wrapper{
    position:relative;
    width:300px;
    height:200px;
}
#canvasBottom, #container{
    position:absolute; top:0px; left:0px;
    width:100%;
    height:100%;
}

JS使用容器div

var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 200
});

【讨论】：