Question

以下是代码。我想在canvas下面使用movingCanvas。

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

第二个问题。在更高的层次上，我试图隐藏下面的画布。 movementCanvas是一个颜色编码的地图，我会在其中查找点击时的值，并且访问像素的唯一方法是使用HTML5画布和上下文。顶部的“画布”是前端，应该看起来不错。这听起来像是一种理智的方式吗？

Answer 1

使用CSS的position: absolute。将以下CSS添加到您的页面：

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

这会将两幅画布放在同一位置：最大部分。

您可能希望将它们放在一个包装元素中，该元素需要为position: relative才能生成其子元素。例如，您的HTML将如下所示：

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

你的CSS看起来像这样：

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

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

然后定位包装div，但是你要定位其他东西。

如何将两个相同尺寸的画布堆叠在一起？

1 个答案: