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

Question

我一直在 HTML5 Canvas 上玩虚线，但遇到了障碍。如果我将 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();

此外，LineWidth(粗细)和方向都无法解决问题。如果我将 LineWidth 从 1 更改为任何其他值，问题仍然存在。无论线是水平的还是垂直的，它都会持续存在。

我在这个代码笔中放了一堆例子:https://codepen.io/anon/pen/ENLwdb

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

如果我发现它们是偶数，我唯一的办法就是改变线的长度吗？

Answer 1

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

删除 closePath()(只需要关闭描边多边形形状的路径)，它将起作用。

Modified CodePen