下面是代码.我想在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画布和上下文.顶部的"画布"是前端,应该看起来不错.这听起来像是一种理智的方式吗？
使用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,然后定位其他东西.