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>

HTLM5 Canvas：消除旋转的精灵之间的间隙

1 个答案: