1

我正在尝试使用此示例： http ://html5.litten.com/using-multiple-html5-canvases-as-layers/ 为背景创建多个 html5 层（实际上只需要 2 个），然后在顶部创建动画那个背景。

问题出在示例上，许多其他建议使用 z-index 等对画布进行分层的解决方案似乎都将画布定位在绝对位置的 left:0 和 top:0 处。

例如： html5 - 画布元素 - 多层 html5 - 画布元素 - 多层

然而，我想做的是让位置是动态的，但总是让两个画布彼此层叠。

到目前为止，我必须做的是：

    <div id="canvasesdiv" align=center; style="text-align:center; float:center">
        <canvas id="bottomlayer-background" style="z-index: 1; border:1px dotted;" align=center>
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <canvas id="toplayer-movingstuff" style="z-index: 2; border:1px dotted; position:absolute; left:530px; top:83px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
</div>

这种方法的问题是我必须手动找出底层左上角的位置，然后将其输入到顶层。但是这个位置只适用于一个浏览器，一个显示器，全屏等。显然，不可行。

当我尝试让两者都对齐=中心时，会发生什么是画布并排出现，而不是相互叠加。

当我尝试为两者做绝对位置时，问题是窗口中的其他东西，最初位于画布下方（即文本、表格等）突然出现在画布下方。

有没有其他人能够解决这个问题？

谢谢！

4

2 回答 2

3

绝对定位的工作方式是目标元素绝对定位在其最近定位的祖先中。这意味着如果包含 div 是绝对定位或相对定位，那么目标元素将绝对定位在包含 div 内。

注意：除非您在其他地方弄乱了 z-index，否则您实际上并不需要 z-index

另一个注意事项：如果你想让你的画布表现出来，设置它们的宽度和高度属性，否则事情会变得奇怪。

http://jsfiddle.net/mobidevelop/4WDJz/

HTML

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>

<div id="contain">
        <canvas id="surface1" width="480" height="160">
        </canvas>
        <canvas id="surface2" width="480" height="160">
        </canvas>
</div>

<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>​

CSS：

#contain {
    width: 480px;
    height: 160px;
    margin: 0 auto;
    position: relative;    
}

#surface1,
#surface2 {
    top: 0;
    left: 0;
    position: absolute;
}

而且，为了更好地衡量，JS：

var surface1 = document.getElementById('surface1');
if (surface1 != null) {
    if (surface1.getContext) {
        var context = surface1.getContext("2d");
        if (context != null) {
            context.fillStyle = "rgba(255,0,0,0.25)";
            context.fillRect(0,0,480,160);
        }
    }
}
surface2 = document.getElementById('surface2');
if (surface2 != null) {
    if (surface2.getContext) {
        var context = surface2.getContext("2d");
        if (context != null) {
            var x = 0;
            context.fillStyle = "rgba(0,0,0,1.0)";
            last = new Date();
            setInterval
            (
                function()
                {
                    var now = new Date();
                    var del = (now - last) / 1000.0
                    last = now;

                    context.clearRect(0,0, 480, 160);
                    context.fillRect(x, 10,32,32);                
                    x += 10 * del;
                    if (x > 480) {
                        x = -32;
                    }
                }, 15
            );            

        }
    }
}

​</p>

于 2012-06-29T21:24:59.410 回答
0 
#canvasesdiv{margin:0 auto; position:relative; width:300px;}

#bottomlayer-background, #toplayer-movingstuff{
    position:absolute; 
    z-index: 1; 
    border:1px dotted blue; 
    height:200px;
    width:300px;
}
#toplayer-movingstuff{
    z-index: 2; 
    border:1px solid red; 
}

​</p>

工作小提琴

以上应该工作。只需给包含元素一个相对位置，这将使子元素absolute相对于父元素定位。

于 2012-06-29T20:18:52.043 回答