如何可以堆叠两个相同大小的画布彼此叠加？ [英] How can I stack two same-sized canvas on top of each other?
问题描述
下面是le代码。我想在canvas下面移动Canvas。
< html>
< head>
< script type =text / javascriptsrc =game.js>< / script>
< / head>
< body>
< canvas id =canvaswidth =710height =597style =border：1px solid＃c3c3c3;>
< p>您的浏览器不支持画布！< / p>
< / canvas>
< canvas id =movementCanvaswidth =710height =597style =border：1px solid＃c3c3c3;>
< / canvas>
< / body>
< / html>
第二个问题。在更高的层次，我试图隐藏下面的画布。 movementCanvas是一个颜色编码的地图，我将查找点击时存在的值，访问像素的唯一方法是使用HTML5画布和上下文。顶部的画布是前端，应该看起来不错。
使用CSS的 position：absolute 。在页面中添加以下CSS：
canvas {
position：absolute;
top：0;
left：0;
}
这将把两个画布放在同一位置：
您可能想将它们放在一个wrapper元素中，这将需要 position：relative 其子元素为。例如，您的HTML将如下所示：
< div class =wrapper>
< canvas id =canvas1width =400height =300>< / canvas>
< canvas id =canvas2width =400height =300>< / canvas>
< / div>
您的CSS将如下所示：
.wrapper {
position：relative;
width：400px;
height：300px;
}
.wrapper canvas {
position：absolute;
top：0;
left：0;
}
然后放置wrapper div，然后放置其他东西。 p>
Below is le code. I want movementCanvas underneath canvas.
<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>
Second question. At a higher level, I'm trying to hide the canvas below. The movementCanvas is a color-coded map where I'll look up what value is there when clicked, and the only way to access the pixels is by using the HTML5 canvas and context. The top "canvas" is the front end and should look nice. Does that sound like a sane way to do this?
Use CSS's position: absolute. Add the following CSS to your page:
canvas {
position: absolute;
top: 0;
left: 0;
}
This will put both canvases at the same spot: the topleft-most part.
You might want to put them in a wrapper element, which will need to be position: relative in order for its child elements to be. For example, your HTML will look something like this:
<div class="wrapper">
<canvas id="canvas1" width="400" height="300"></canvas>
<canvas id="canvas2" width="400" height="300"></canvas>
</div>
And your CSS will look like this:
.wrapper {
position: relative;
width: 400px;
height: 300px;
}
.wrapper canvas {
position: absolute;
top: 0;
left: 0;
}
Then position the wrapper div however you'd position the other stuff.
这篇关于如何可以堆叠两个相同大小的画布彼此叠加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
