无法将一个画布放在另一个画布下

Crocus 发表于 Dev

番红花

我想在另一个下面放一块画布。我对javascript很陌生，所以如果以下代码看起来有些混乱，我会提前道歉。我想让名为“ myCanvas”的画布出现在“ coinAnimation”的后面。非常感谢所有回复。

的HTML

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

Java脚本

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

car

看到这里：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。