在画布上绘制三角形矩形时的细线/空白空间

我正在探索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

在画布上绘制三角形矩形时的细线/空白空间

回答

相关问题