1

私はこの例を使用しようとしています: http://html5.litten.com/using-multiple-html5-canvases-as-layers/ 背景用に複数のhtml5レイヤー(実際には2つだけ必要)を作成し、次にアニメーションを上に作成しますその背景の。

問題は例であり、z-index などを使用してキャンバスをレイヤー化することを提案する他の多くのソリューションはすべて、キャンバスを left:0 および top:0 に絶対位置に配置するようです。

例: html5 - キャンバス要素 - 複数のレイヤー html5 - キャンバス要素 - 複数のレイヤー

ただし、私がやりたいのは、位置を動的にすることですが、常に2つのキャンバスが互いに重ねられるようにすることです。

私がこれまでにやらなければならなかったことはこれです：

    <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>

このアプローチの問題は、最下層の左上がどこにあるかを手動で把握し、それを最上層に入力する必要があることです。しかし、この位置は、1 つのブラウザー、1 つのモニター、全画面表示などにのみ当てはまります。明らかに、機能しません。

両方を align=center にしようとすると、キャンバスが重なり合うのではなく、横に並んで表示されます。

両方の絶対位置を指定しようとすると、最初はキャンバスの下にあったウィンドウ内の他の要素 (つまり、テキスト、テーブルなど) が突然キャンバスの下に表示されるという問題があります。

他の誰かがこの問題を解決できましたか?

ありがとう！

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 に答える