画布路径上的随机点（来自 svg 的路径）答案

【问题标题】：Random point on canvas path (path from svg)画布路径上的随机点（来自 svg 的路径）
【发布时间】：2014-12-18 22:28:35
【问题描述】：

我试图将我的 svg 路径放在画布上，如下所示：

this.svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="201" enable-background="new 299.9 155.9 200 200.9">...</svg>';
var mySrc = 'data:image/svg+xml;base64,'+window.btoa(this.svg);
this.source = new Image();
this.source.src = mySrc;
ctx.drawImage(this.source, nv[0], nv[1], nv[2], nv[3]);

效果很好

不，我想做的是在画布的这条路径上的随机位置放置一个点（或圆）。所以我需要为这个新点随机化 x 和 y。

有什么办法吗？我怎样才能随机打一个 X 坐标，然后得到 Y 坐标以便它位于路径上？路径不是直线。

目前我没有使用任何第三方库，例如 Raphael，但如果需要，我可以包含它们。

谢谢。

编辑：

好的，我想出了一个快速的解决方案，你可以在这里查看：http://jsfiddle.net/pg54qp84/ （提示：检查控制台以获取调试信息）但问题是，我仍然需要做初始动画，并且根据它的速度，点数组中的点数会有所不同 - 动画越慢，点数组中曲线的表示越准确。

有人知道如何摆脱这一步吗？

【问题讨论】：

标签： javascript html canvas svg

【解决方案1】：

您可以使用 SVG DOM getPointAtLength(distance) 方法，其中距离是从 0 到 getTotalLength() 的随机数

【讨论】：

但是如果路径是弯曲的，看起来像字母“C”或“O”——所以它有两个点和相同的 X？
我不是建议您选择 X 并获得 Y。我建议您沿路径选择一个随机距离并将该点的 X 和 Y 放在一起，从而避免重复 Y 的任何问题。