Wie kann ich zwei gleich große Canvas übereinander stapeln?

Unten ist der Code. Ich möchte Bewegung Canvas unter Leinwand.Wie kann ich zwei gleich große Canvas übereinander stapeln?

<html> 
<head> 
    <script type="text/javascript" src="game.js"></script> 
</head> 
<body> 

    <canvas id="canvas" width="710" height="597" style="border:1px solid #c3c3c3;"> 
    <p>Your browser doesn't support canvas!</p> 
    </canvas> 

    <canvas id="movementCanvas" width="710" height="597" style="border:1px solid #c3c3c3;"> 
    </canvas> 

</body> 
</html>

Zweite Frage. Auf einer höheren Ebene versuche ich, die Leinwand darunter zu verstecken. Das movementCanvas ist eine farbkodierte Map, auf der ich nachschlagen kann, welchen Wert man beim Anklicken hat, und die einzige Möglichkeit, auf die Pixel zuzugreifen, besteht in der Verwendung des HTML5-Canvas und des Kontextes. Die obere "Leinwand" ist das vordere Ende und sollte gut aussehen. Klingt das wie ein vernünftiger Weg, dies zu tun?

Quelle

2012-04-05 user422318

Verwenden Sie CSS position: absolute. Fügen Sie den folgenden CSS auf Ihre Seite:

canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

Dies legte beide Leinwände an der gleichen Stelle: die topleft-größten Teil.

Sie könnten sie in ein Wrapper-Element einfügen, das position: relative sein muss, damit seine untergeordneten Elemente sein können. Zum Beispiel wird Ihr HTML wie folgt aussehen:

<div class="wrapper"> 
    <canvas id="canvas1" width="400" height="300"></canvas> 
    <canvas id="canvas2" width="400" height="300"></canvas> 
</div>

Und Ihre CSS wird wie folgt aussehen:

.wrapper { 
    position: relative; 
    width: 400px; 
    height: 300px; 
} 

.wrapper canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

Dann den Wrapper div positionieren Sie jedoch die anderen Sachen positionieren würde.

Quelle

2012-04-06 00:11:49

Erste Frage: Was ist der Sinn des Wrappers div? Ist es nur, um die zwei Leinwand zusammenzuhalten? Zweite Frage: "Leinwand" ist eine 2D klickbare Karte für ein Spiel. Aufgrund der Positionierung werden meine Canvas-Klicks nicht mehr erkannt. Wie kann ich damit umgehen? – user422318

Das Wrapper-Div existiert zur Positionierung. Klickt auf BEIDE Leinwände ... nicht ganz sicher. Könntest du sie vielleicht in 1 Leinwand zusammenfassen? –

Wenn Sie wirklich zwei Leinwände benötigen, können Sie über die Leinwand, die oben angezeigt wird, Ereignisse an die untere Leinwand senden. –

Wie kann ich zwei gleich große Canvas übereinander stapeln?

Antwort

Verwandte Themen