Javascript 创建平滑的随机生成的线

我一直在尝试按照这个示例逐点创建一条平滑的随机生成的线

以下是我的代码片段：

var ptheta = 50;
var theta = 50;
var px = 0;
var py = 0;
var x = 50;
var y = 50;
var a = 0.3;

var rand = 0;
var angleVar = 0;


function animate(){
    rand = Math.random() * (10.0 - 1.0) * 1.0;
    angleVar = ((2*rand-1) * a * Math.PI);
    theta = ptheta + angleVar;
    px = x;
    py = y;
    r = rand//Math.random() * (10.0 - 1.0) * 1.0;
    x = (px + r * Math.cos(ptheta));
    y = (py + r * Math.sin(ptheta));
    ptheta = theta;

    //draw
    ctx.lineWidth = 3 //make this random
    ctx.beginPath()
    ctx.moveTo(this.px, this.py)
    ctx.strokeStyle = this.color
    ctx.lineTo(this.x, this.y)
    ctx.lineCap = "round"
    ctx.stroke()
}

看起来代码几乎完成了必要的工作。它确实创建了一个随机生成的行，但我遇到了两个问题：

生成的线太小了。我对算法做的任何小改动都会使它变得太大。我不太明白为什么会这样

该行似乎并不完全遵循所提供链接中列出的规则。在方向上似乎仍然存在着不和谐的变化，在所提供的链接中，被接受的答案说这应该避免

我尝试使用html画布并使用下面的代码和上面提供的示例在画布上绘制笔划来实现这一点

任何帮助都将不胜感激

编辑：

I您的笔并进行了一些修改：

• 为rand设置一个随机值，用于设置新角度，因为您认为它需要太多的急转弯使用

  rand=Math.random（）将为您提供介于0-1而不是0-9之间的值

• 为r设置一个单独的随机值，用于控制步长，如

  r=Math.random（）*20

＞P>将起始点放在屏幕中间，如果你想通过：
var x=window.innerWidth/2； 变量y=窗内高度/2

---

您能否添加一个链接，以复制您的问题？比如jsbin或codepen。当你说线太小，你的意思是短还是薄？添加了一个代码笔项目的链接。线条的粗细可以很容易地编辑，线条的长度基于算法，但我不能绕着头。我得说这些线太短了。或者更确切地说，一行的最大长度太短。这行：

rand=Math.random（）*（10.0-1.0）*1.0

与：

rand=Math.random（）*9

Math.random（）返回一个介于0-1之间的值，这意味着rand将是一个介于0和9之间的值。如果你想让它采取更大的步骤，你可以乘以一个大于9的数字。你完全正确，这似乎解决了这个问题。虽然我更关心的问题是第二个问题，我似乎遵循了算法到了一个T，但这条线似乎仍然有一些急转。如果你能弄明白，我会非常感激的！我用叉子叉起你的笔，做了一些修改：*为rand设置一个随机值，用于设置新角度，因为你认为它需要太急的转弯使用

rand=Math.random（）

将为您提供介于0-1而不是0-9*之间的值。r有一个单独的随机值，用于控制步长，如

r=Math.random（）*20你也可以把起始点放在屏幕中间，如果你想通过：<代码> var x＝窗口宽度2。变量y=窗内高度/2