javascript - 定位 JavaScript 图像

Question

我得到了 2 张图 block 图像，并且完全完成了渲染，但我不知道如何将 Angular 色放在 map 前面。

我将这些图像放置在 2 个不同的 js 文件中。

这是字符js文件:'

function drawFrame(frameX, frameY, canvasX, canvasY) {
  ctx.drawImage(img,
  frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
  canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
}

loadImage();

`这是 map js文件:

function drawMap() {
   for (var r = 0; r < rowTileCount; r++) {
      for (var c = 0; c < colTileCount; c++) {
         var tile = ground[ r ][ c ];
         var tileRow = (tile / imageNumTiles) | 0;
         var tileCol = (tile % imageNumTiles) | 0;
         ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
      }
   }window.requestAnimationFrame(drawMap);
}

Answer 1

每次调用该函数后，

requestAnimationFrame 都会继续一次又一次地调用 drawMap()。这意味着如果第一个图像已绘制一次，那么 map 将在第二个动画帧(以及之后的每个帧)上绘制在它上面。

为了简化您的流程，请创建一个调用所有绘制方法的函数，以便您可以控制项目的绘制顺序。然后在此函数中使用 requestAnimationFrame 而不是当前的 drawFrame 函数，以便按照您想要的顺序在每个帧上重新绘制每个项目。

function drawEverything() {

    drawMap();
    drawFrame();

    window.requestAnimationFrame(drawEverything);
}

现在，当您准备好开始动画时，调用 drawEverything()。

还有一件事:如果项目将在 Canvas 动画中的任何位置移动，则应在每次新绘制时清除 Canvas 。否则， Canvas 很快就会变成一片困惑的颜色。

function drawEverything() {

    // Erase the current frame
    // (Note: replace 400 here with your canvas width, and 300 with its height)
    ctx.clearRect(0, 0, 400, 300);

    drawMap();
    drawFrame();

    window.requestAnimationFrame(drawEverything);
}