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

Question

我正在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/

由于三角形似乎是图形绘制的基础，我想我错过了在这些场景中应用的常见解决方法。这通常如何处理？

Answer 1

如果您还为形状和填充添加笔划，则会消除该间隙。我假设笔划默认为透明或其他。

将此添加到fillPolygon功能的末尾。

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