10

下面是文件代码。我想在画布下移动画布。

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

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

4

1 回答 1

14

使用 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，但是您可以定位其他东西。

于 2012-04-06T00:11:49.047 回答