Javascript 如果长度为偶数，为什么细虚线显示为实线？

我一直在HTML5画布上玩虚线游戏，我遇到了一个障碍。如果我将LineDash设置为[2,2,2,2,2]，那么如果是偶数像素长的直线，它看起来几乎是实心的。如果是奇数像素长的话，它看起来更清晰。在我的Mac电脑上，我在Firefox、Chrome和Safari上得到了相同的结果

下面是显示效果的简单代码：

context = document.getElementById("canvas").getContext('2d');
context.lineWidth = 1;
context.strokeStyle = '#990000';
context.setLineDash([2,2,2,2,2]);

// Line ends on an even y-coordinate
context.beginPath();
context.moveTo(2,0);
context.lineTo(2,94);
context.closePath();
context.stroke();

// Line ends on an odd y-coordinate
context.strokeStyle = '#000099';

context.beginPath();
context.moveTo(102,0);
context.lineTo(102,95);
context.closePath();
context.stroke();

此外，线宽（厚度）和方向都不能解决此问题。如果将线宽从1更改为任何其他值，则问题仍然存在。无论线条是水平的还是垂直的，它都会持续存在

我在这个代码笔里放了很多例子：

为什么长度很重要？破折号的样式不应该与长度相同吗

---

如果我发现它们是偶数，我唯一可以改变线长度的方法是什么

这是因为代码在一行上使用了

closePath（）

，这使得它在顶部添加了一个额外的行，从端点回到起点。根据长度和样式，返回线可能会或可能不会填充剩余间隙

删除

closePath（）

（仅用于关闭笔划多边形形状的路径），它将正常工作

---

你是救命恩人。我永远也想不到。所以closePath（）不适用于直线、椭圆、圆弧等？仅闭合多边形？如何闭合直线？；）@Kirkman14您可以将其用于椭圆、圆弧和由线段等组成的复杂形状，但不能用于一条直线。而且它只在笔划中才真正需要，因为fill（）会在内部关闭形状。@dandavis：我只是误解了它的用途。我假设，由于您需要指示您正在使用beginPath（）绘制一条新路径，因此您应该指示何时完成closePath（）。@Kirkman14:我也没有看到它，但后来它是一个facepalm。。。