我采用并改编了一个绘制虚线的 HTML5 画布扩展，但它有几个问题，如http://jsfiddle.net/VxCYL/2/所示
示例 1：如何避免两点之间的距离非常小的点“聚集”在一起（参见第一个角点 30,50 到 32,50）。我想在确定是否绘制或移动到下一个点时，我需要检查与最后一个点的距离？当我有很多点时，输出看起来很笨拙。
示例 2：from.x 小于 to.x 或 from.y 小于 to.y 即向后绘制 moveTo 的行为不像我预期的那样，即在示例中显示的行仍应连接向上。
谢谢。
第一个问题在图书馆中不容易解决。它需要一个包装器方法，该方法需要一个点数组，以便它可以在“圆角”时累积并跟踪当前的点/破折号状态。（如果时间允许，我将编写一个方法来执行此操作；如果这样做，我将编辑此答案并添加通知评论。）
您无法通过更改您的dashArray.
例如，对于[2,9]图案的标称 dashArray，每 11 像素重复一次。如果你的第一行是 115px，这意味着你将绘制 10 个图案副本，2px 的点和 3px 的虚线。因此，您希望下一行以 6px 偏移量开始，然后再绘制下一个点。[0,6,2,9,2,9,2,9,2,9,2,9,...]在覆盖下一行的长度之前，您将需要一个 dashArray 。：/
第二个例子显然是代码中的一个错误。这是一个稍微简单的演示：
为了解决这个问题，我们需要确保xStep当为负数时dx为负数。我们将这一行添加到：
if (dx<0) xStep = -xStep;
谢谢，你是绅士。值得注意的是，我尝试了类似的方法，但在我的无知中将 dx<0 设置为 dx<1。
此 Fiddle 中还显示了另一个问题：
如果 x 或 Y 是内联的，则不会渲染任何内容。
最后一个问题现在已经解决了。修复是在计算斜率时满足 Infinity 或 -Infinity ：
var 斜率 = (dy / dx); 斜率 = 斜率 == 无穷大 || 斜率 == -Infinity ? dy : 斜率;