Zeichnung mehr gedrehte Bilder nebeneinander

Question

ich mehr gedrehte Bilder nebeneinander auf einer HTML5 Leinwand zu zeichnen ich versuche, aber leider gibt es immer eine Lücke zwischen ihnen:

Die Idee ist, dass ich mehrere Blöcke unterschiedlicher Größe mit Kacheln zeichnen möchte. Jeder einzelne Block kann rotiert werden. Wenn ich einen solchen Block zeichne, rufe ich die Rotationsfunktion der Leinwand einmal auf, um dann alle Kacheln nebeneinander zu zeichnen, um einen solchen Block zu bilden.

Zu diesem Zeitpunkt weiß ich nicht wirklich, was ich tun soll, um das Problem zu lösen. Natürlich könnte ich für jeden einzelnen Block eine Offscreen-Leinwand verwenden, aber nach meinem Wissen wird dies zu ernsthaften Leistungsproblemen in meinem Spiel führen, da es viele dieser Blöcke mit jeweils eigenen Größen, Kacheln und Rotation geben kann.

Eine andere Option wäre die Verwendung von Mustern für dieses spezielle Szenario, das eine praktikable Option wäre. Aber leider muss ich auch Blöcke zeichnen, wo die Fliesen an den Kanten eine different image bekommen.

Was wäre ein guter Weg, um diese Lücken zu beseitigen? Soll ich einfach zusätzliche Kacheln dazwischen zeichnen, um die Lücken auf eine hacky Art zu füllen. Oder gibt es eine Option, an die ich noch nicht gedacht habe?

Edit: JSFiddle: https://jsfiddle.net/Oli414/oxap9fgr/2/ (Es gilt allgemein Zeichnung, nicht nur Bilder).

ctx.rotate(rotation * Math.PI/180); 
for (var i = 0; i < width; i++) 
{ 
    for (var j = 0; j < height; j++) 
    { 
     ctx.fillRect(i * tileSize, j * tileSize, tileSize, tileSize); 
    } 
} 

Answer 1

Schritte:

1 .: eine fillStyle mit dem Bild erstellen, indem ctx.createPattern (Bild, Wrap) und setzte Wrap als "repeat" (Vergessen Sie nicht, vor dem Bild zu warten Lasten.

2 .: Anstatt jedes Bild in einem separaten drawImage Aufruf zeichnen, verwenden nur ctx.fillRect (BeginX, BeginY, Breite, Höhe). Dies ist auch eine bessere Leistung für größere Kacheln hat.

Es sollten keine Lücken zwischen den Bildern sein

Wenn Ihnen diese Idee nicht gefällt, können Sie das Bild einfach um 1 Pixel in jede Richtung überdimensionieren.