無法將一個畫布放在另一個畫布下

Question

我想將畫布放在另一個畫布下。我很新的JavaScript，所以我提前道歉，如果下面的代碼看起來有點混亂。我想讓名爲「myCanvas」的畫布出現在「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絕對定位到（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>