在畫布上繪製三角形矩形時的細線/空白空間

我正在探索HTML畫布上的一些繪圖，並很快着手解剖我的形狀爲三角形，因爲這似乎是確保一個是最常用和最可靠的方法只處理簡單的多邊形，而不是自我交叉的多邊形（它以一種不可控制的方式繪製給我）。在畫布上繪製三角形矩形時的細線/空白空間

但是，當我想畫一個簡單的矩形爲三角形，我得到了以下結果：

我採取的方法是：

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');

想在這裏看到完整的例子： https://jsfiddle.net/JLVva/85/

由於三角形似乎是圖形繪製的基礎，我想我缺少在這些場景中應用的常用解決方法。這通常如何處理？

來源

2017-04-20 Timm

這個答案可能會有所幫助http://stackoverflow.com/a/33788934/3877726 – Blindman67

如果您還爲形狀添加筆觸以及填充，則會消除該空隙。我假設筆畫默認爲透明或其他東西。

將此添加到您的fillPolygon函數的末尾。

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

來源

2017-04-20 09:39:24 Razzildinho

因爲我從來沒有中風，我覺得沒有什麼白/透明被繪製。 – Timm

但我認爲你的想法可能解決這個問題，因爲它使三角形稍微大一點（假設筆畫寬度爲1）。我發現其他人建議只是增加「一點」形狀的大小，以便它們重疊，但我不認爲這可能是最終的解決方案，因爲它非常不精確，並可能導致不一致的結果（想象每個三角形都有一個不同的顏色，如果要按顏色計算所有像素，則應該獲得相同的數量，而不是最後一個繪製的數量）。 – Timm

我不確定，但我會說有一箇中風自動應用或爲中風留下的差距，這就是爲什麼你得到髮際線。 – Razzildinho

在畫布上繪製三角形矩形時的細線/空白空間

回答

相關問題