HTML5 Canvas：删除旋转精灵之间的间隙

Question

所以我正在制作一个基于瓦片的小型宇宙飞船游戏，我遇到了一个问题，即当船舶旋转时瓦片精灵旋转时，瓦片之间似乎存在小间隙。我调查了这一点，发现抗锯齿可能与它有关，但在使用ctx.imageSmoothingEnabled= false;后，我仍然看不到任何变化。

它看起来应该是这样，当一切都是90度角时，它看起来很好：

The spaceship with no gaps between sprites

Another example with a ship looking fine at a 90 degree angle

但是，当船舶旋转时：

Gaps between the sprites

以下是用于可视化切片边框的“网格”示例：

Tile grid

目前，我正在使用一个系统，将更大的2x2瓦片精灵分成4个1x1瓦片。我可以改变它来渲染整个2x2平铺并且主要解决这个问题因为它不太明显，但我想知道是否有一个没有间隙的解决方案。

Answer 1

您可以在离屏画布上简单地渲染一次，然后旋转这个完整的图像，而不是每次都编写它。

// the main context
const ctx = canvas.getContext('2d');
// an off-screen canvas
const ship = document.createElement('canvas');
const ship_renderer = ship.getContext('2d');
ship.height = ship.width = 150; 
const sprites = new Image();
sprites.onload = begin;
sprites.src = 'https://i.stack.imgur.com/scISJ.png';
let angle = 0;


function begin() {
  drawShip(ship_renderer); // render once complete
  anim(); // rotate
}

// draw our sprites on given context
function drawShip(renderer) {
  for(let y=0; y<6; y++) {
    for(let x=0; x<6; x++) {
      renderer.drawImage(sprites,
        (x + y * 6) * 25, 0, 25, 25,
        x * 25, y * 25, 25, 25
      );
    }
  }
}

function anim() {
  ctx.clearRect(0,0,canvas.width, canvas.height);
  angle += Math.PI / 180;
  
  // draw our complete image on the left
  ctx.setTransform(1,0,0,1,75,75);
  ctx.rotate(angle);
  ctx.translate(-75, -75);
  ctx.drawImage(ship, 0, 0);

  // draw like OP on the right
  ctx.setTransform(1,0,0,1,225,75);
  ctx.rotate(angle);
  ctx.translate(-75, -75);
  drawShip(ctx);
  
  ctx.setTransform(1,0,0,1,0,0);
  requestAnimationFrame(anim);
}

canvas{
  background: black;
}

<canvas id="canvas"></canvas>