Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
563 views
in Technique[技术] by (71.8m points)

css - How can I stack two same-sized canvas on top of each other?

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...