HTML5 Canvas绘制圆点虚线实例

HTML5 Canvas API提供了丰富的图形绘制函数，然而遗憾的是，它只提供了绘制实线的功能（lineTo），却未提供绘制虚线的直接方法。这种设计上的缺失在某些情况下可能会带来不便。正如《JavaScript权威指南》的作者David Flanagan所提到的，对于这种在规格中添加和实现都相当简单的功能缺失，确实有些令人费解。

在Stack Overflow社区中，Phrogz分享了一种实现虚线绘制的方法，更准确地说是点划线的效果。但如果你想要实现圆点虚线（如下图示），就需要采取其他策略。

以下是我对圆点虚线绘制的实现方式，此版本仅支持水平和垂直方向的圆点虚线。你可以参考Phrogz和Rod MacDougall的方法，进一步扩展以实现斜线的功能。

在实现中，我们首先获取CanvasRenderingContext2D的原型，然后添加一个新的方法dottedLine。这个方法接收五个参数：起始点的x和y坐标、结束点的x和y坐标以及间隔距离。如果没有指定间隔距离，那么默认值为5。

接着，我们判断线的方向是水平还是垂直。如果两个点的x坐标相同，那么线是水平的；否则，线是垂直的。然后，我们计算出线的长度，并通过循环在每个间隔距离上绘制一个圆点。

在绘制过程中，我们使用moveTo方法将画笔移动到当前位置，然后使用arc方法绘制一个很小的圆点（这里使用半径为1的圆）。我们使用fill方法填充这个圆点。对于水平和垂直线，我们在计算坐标时有所不同，以确保圆点能够沿着线的方向正确绘制。

通过调用cambrian.render('body')将上述代码应用到页面上。这样一来，你就可以在Canvas上绘制出圆点虚线了。这种实现方式虽然基础，但足以满足大多数情况下的需求。如果你想要更复杂的效果，比如斜线或不同样式的虚线，可以进一步扩展这个方法。