Haarlinie/leerer Raum beim Zeichnen eines triangulierten Rechtecks ​​auf Leinwand

Question

Ich untersuchte einige Zeichnungen auf der HTML-Zeichenfläche und landete schnell darauf, meine Formen in Dreiecke zu zerlegen, da dies der gebräuchlichste und sicherste Weg zu sein scheint Ich behandle nur einfache Polygone und nicht selbst-überschneidende (die sich auf eine etwas unkontrollierbare Weise zu mir ziehen).

Aber wenn ich ein einfaches Rechteck als Dreiecke ziehen wollte, bekam ich folgendes Ergebnis:

Der Ansatz, den ich gemacht habe ist folgendes:

const rect = [{ 
    x: 200, 
    y: 225 
}, { 
    x: 490, 
    y: 225 
}, { 
    x: 490, 
    y: 375 
}, { 
    x: 200, 
    y: 375 
}]; 

const triangle1 = [rect[0], rect[1], rect[2]]; 
const triangle2 = [rect[0], rect[2], rect[3]]; 

fillPolygon(ctx, triangle1, 'blue'); 
fillPolygon(ctx, triangle2, 'blue'); 

die vollständige Beispiel finden Sie hier : https://jsfiddle.net/JLVva/85/

Da Dreiecke scheinen die Grundlage der Grafikzeichnung zu sein, ich denke, ich vermisse eine gemeinsame Workaround in diesen Szenarien angewendet. Wie wird das normalerweise gehandhabt?

Answer 1

Wenn Sie der Form auch einen Strich und eine Füllung hinzufügen, wird diese Lücke entfernt. Ich nehme an, der Strich ist standardmäßig transparent oder so.

Fügen Sie dies an das Ende Ihrer fillPolygon Funktion.

ctx.strokeStyle = color; 
ctx.stroke();