HTLM5 Canvas：消除旋轉的精靈之間的間隙

Question

因此，我正在做一個基於方塊的小宇宙飛船游戲，但遇到一個問題，即當船旋轉時方塊精靈旋轉時，方塊之間似乎存在很小的間隙。 我調查了一下，發現抗鋸齒可能與此有關，但是在使用ctx.imageSmoothingEnabled= false; 我仍然看不到變化。

在這里看起來應該是正確的，當所有東西都成90度角時，看起來不錯：

精靈之間沒有間隙的宇宙飛船

另一個例子，船在90度角下看起來很好

但是，當船舶旋轉時：

精靈之間的差距

這是用於可視化瓷磚邊框的“網格”示例：

瓷磚網格

當前，我使用的系統將“較大”的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>