javascript - 无法将一个 Canvas 放在另一个 Canvas 下

Question

我想把 Canvas 放在另一个 Canvas 下面。我是 javascript 的新手，所以如果下面的代码看起来有点乱，我提前道歉。我想让名为“myCanvas”的 Canvas 出现在“coinAnimation”后面。非常感谢所有回复。

HTML

<div id="wrapper">
<canvas id="coinAnimation" height="500" width="500"></canvas>
<canvas id="myCanvas" height="500" width="600"></canvas>
</div>

Javascript

<script type="text/javascript">
(function () {
var coin,
    coinImage,
    canvas;                 

function gameLoop () {
    window.requestAnimationFrame(gameLoop);
    coin.update();
    coin.render();
    }

function sprite (options) {
var that = {},
frameIndex = 0,
    tickCount = 0,
    ticksPerFrame = options.ticksPerFrame || 0,
    numberOfFrames = options.numberOfFrames || 1;

    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;

    that.update = function () {

    tickCount += 1;

    if (tickCount > ticksPerFrame) {

    tickCount = 0;

// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {  

// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function () {

// Clear the canvas
that.context.clearRect(0, 0, that.width, that.height);

// Draw the animation
that.context.drawImage(
    that.image,
    frameIndex * that.width / numberOfFrames,
    -110,
    that.width / numberOfFrames,
    that.height,
    0,
    0,
    that.width / numberOfFrames,
    that.height);
    };

return that;
}

// Get canvas
canvas = document.getElementById("coinAnimation");
canvas.width = 600;
canvas.height = 300;

// Create sprite sheet
coinImage = new Image();    

// Create sprite
coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 300,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 7
    });

// Load sprite sheet
coinImage.addEventListener("load", gameLoop);
coinImage.src = "images/test2.png";

} ());
</script>

<script type="text/javascript">
window.addEventListener('load', function () {
  var
    img = new Image,
    ctx = document.getElementById('myCanvas').getContext('2d');

  img.src = "images/back.png";
  img.addEventListener('load', function () {

    var interval = setInterval(function() {
      var x = 0, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, x, y);

        x += -1;
        if (x > ctx.canvas.width) {
          x = 0;
        }
      };
    }(), 1000/40);
  }, false);
}, false);
</script>

Answer 1

参见此处: jsfilddle.net 。我添加了背景颜色来演示定位和 z-index。

首先，使包装器 div 位置相对。这是容器 div 将基于的位置。然后使容器 div 绝对定位到 (0,0)。然后，设置 z-index，使 myCanvas 位于 coinAnimation 之后。

CSS:

#wrapper
{
    position:relative;    
}

#coinAnimation
{
    background-color:blue; 
    position:absolute;
    z-index:1;
}
#myCanvas
{
    background-color:red;
    position:absolute;
    top:0px;
    left:0px;
    z-index:0;
}

HTML:

<div id="wrapper">
    <canvas id="coinAnimation" height="500" width="500"></canvas>
    <canvas id="myCanvas" height="500" width="600"></canvas>
</div>