如果长度均匀，为什么细虚线显示为实线？

Question

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

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

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

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

我在这个代码中添加了一些示例：https://codepen.io/anon/pen/ENLwdb

为什么长度很重要？无论长度如何，短划线图案都不应该相同吗？

如果我发现它们是偶数，我唯一可以改变线长吗？

Answer 1

这是因为代码在一行上使用closePath()，这使得它在顶端添加一条额外的行，从结束点返回到起始点。根据长度和图案，返回线可能会或可能不会填补剩余的间隙。

删除closePath()（仅用于关闭描边多边形形状的路径），它将起作用。

<强> Modified CodePen