Question

简介

我有三幅相互重叠的画布。据我了解，每幅画都是独立的。我已将图层分配到layer1，layer2和layer3。

  ctx1 = document.getElementById('layer1').getContext('2d');
  ctx2 = document.getElementById('layer2').getContext('2d');
  ctx3 = document.getElementById('layer3').getContext('2d');

  var canvasOneWidth = ctx1.canvas.width;
  var canvasOneHeight = ctx1.canvas.height;

  var canvasTwoWidth = ctx2.canvas.width;
  var canvasTwoHeight = ctx2.canvas.height;

  var canvasThreeWidth = ctx3.canvas.width;
  var canvasThreeHeight = ctx3.canvas.height;

我到目前为止编写的代码执行以下操作。

我通过for循环从同一图像创建了10个箭头（箭头A），通过for循环创建了不同图像的1个箭头（箭头B）。所有这些箭头都存储在同一个数组中。我把（箭头A）放在layer1上，（箭头B）放在layer2上。（箭头A）和（箭头B）都能够生成动画。这两个动画都是由代码

中的相同animate（）函数完成的

数组

var arrows = []; // group of (arrow A) and one of (arrow B) are stored here

forloop，创建10（箭头A）

for (var i = 0; i < 10; i++) {

    var randx = getRandomInt(-1500, -100);
    var randy = getRandomInt(10, 300); // put a fixed position
    var rand_rate = getRandomInt(10, 50);
    var rand_vel = getRandomInt(10, 20);
    var rand_rate = getRandomInt(10, 50);

    var new_arrows = new arrow(randx, randy, canvasOneWidth, canvasOneHeight, 'images/arrow1_dup.png', rand_vel, rand_rate);
    arrows.push(new_arrows);
  }

fooloop创建一个（箭头B）

for (var i=0; i<1;i++) {
    var theArrow = new arrow(lastArrow.startx, lastArrow.y, canvasTwoWidth, canvasTwoHeight, 'images/arrow_500x50.png', 10, 20);
    arrows.push(theArrow);
  }

（箭头A）功能

var drawArrow = function (arrows, width, height) {
    var img;
    var arrLength = arrows.length;

    doAnimation = true;

      ctx1.save();
      clearCanvas(1);
      for(var i=0; i<arrLength-1; i++){
        var arrow = arrows[i];
        img = new Image();
        img.src = arrow.getFilename();
        imageWidth = img.naturalWidth;
        imageHeight = img.naturalHeight;
        ctx1.drawImage(img, arrow.getX(), arrow.getY());
        arrows[i].moveArrow(imageWidth, ctx1);
      }
      ctx1.restore();

      return 0;
  };

（箭头B）功能

var initLastArrow = function(callback) {

    var finalArrow = arrows[arrows.length - 1];
    var img;

    doAnimation = true;

    img = new Image();
    img.src = finalArrow.getFilename();
    imageWidth = img.naturalWidth;
    imageHeight = img.naturalHeight;

    ctx3.drawImage(img, finalArrow.getX(), finalArrow.getY());

    arrows[arrows.length - 1].moveArrow(imageWidth, ctx3);

    if (callback && typeof(callback) === "function") {
        callback(finalArrow.getX());
    }

  };

动画代码

 var animate = function () {
    clearCanvas(1);
    clearCanvas(2);
    clearCanvas(3);
    var s = drawArrow(arrows, canvasOneWidth, canvasOneHeight);
      if(s == 0) {
        initLastArrow(function(finalArrowX) {
          if (finalArrowX > 80) {
            doAnimation = false;
            console.log("yay");
            drawLogo();
          }
        });
      }

      if (doAnimation) {
        requestAnimFrame(function() {
          animate();
        });
      }
    };

这就是我要做的事情

我正在尝试制作一个动画，其中（箭头A）和一个（箭头B）组从画布的左侧移动到右侧。当（箭头B）到达画布的中间时，它应该停止动画。同时停止（箭头B）不应影响（箭头A）的动画。

以下是问题

当我停止（箭头B）的动画时，（箭头A）组的动画一起停止。我似乎无法单独停止一个图层而不影响另一个图层，我搜索并尝试了许多代码，仍然无法解决此动画问题。

我希望能在stackoverflow人员身上找到帮助，因为你们中的一些人有能力轻松解决这个问题，这是我尚未掌握的技能。我提前感谢您的帮助。

JSFiddle上的

完整代码：https://jsfiddle.net/irwinsharma05/je86xtb1/1/

PS：1。箭头A和箭头B是图像和2.所有列出的定义和功能都与帮助解决问题有关。

Answer 1

尝试使用div元素和CSS覆盖画布：

HTML：

<div id="layer1">
  <canvas></canvas>
  <div id="layer2">over the canvas</div>
</div>

CSS：

#layer1 {
  position: relative;
}
#layer1 canvas, #layer2 {
  position: absolute;
}

如何在一层中停止动画而不影响HTML5 Canvas中的另一层？

1 个答案: