Javascript 动态波浪路径/边界 我需要建立一些东西，但是我的数学能力不高。我希望构建的是类似的东西，但我需要它是圆和多边形的混合体，而不是直线。黑线应该是动态的、随机生成的，基本上作为页面的边框

目前，我正在进行剖析，希望能够将其转换成这个，但我对我是否能够弄清楚这一点有很大的怀疑

你知道怎么做吗，或者有人能解释一下数学吗？

下面是我在上面链接的答案中关于代码的注释

var
  cw = cvs.width = window.innerWidth,
  ch = cvs.height = window.innerHeight,
  cx = cw / 2,
  cy = ch / 2,
  xs = Array(),
  ys = Array(),
  npts = 20,
  amplitude = 87, // can be val from 1 to 100
  frequency = -2, // can be val from -10 to 1 in steps of 0.1

ctx.lineWidth = 4

// creates array of coordinates that
// divides page into regular portions
// creates array of weights
for (var i = 0; i < npts; i++) {
  xs[i] = (cw/npts)*i
  ys[i] = 2.0*(Math.random()-0.5)*amplitude
}

function Draw() {
  ctx.clearRect(0, 0, cw, ch);
  ctx.beginPath();

  for (let x = 0; x < cw; x++) {
    y = 0.0
    wsum = 0.0

    for (let i = -5; i <= 5; i++) {
      xx = x; // 0 / 1 / 2 / to value of screen width

      // creates sequential sets from [-5 to 5] to [15 to 25]
      ii = Math.round(x/xs[1]) + i

      // `xx` is a sliding range with the total value equal to client width
      // keeps `ii` within range of 0 to 20
      if (ii < 0) {
        xx += cw
        ii += npts
      }
      if (ii >= npts){
        xx -= cw
        ii -= npts
      }

      // selects eleven sequential array items
      // which are portions of the screen width and height
      // to create staggered inclines in increments of those portions
      w = Math.abs(xs[ii] - xx)

      // creates irregular arcs
      // based on the inclining values
      w = Math.pow(w, frequency)

      // also creates irregular arcs therefrom
      y += w*ys[ii];

      // creates sets of inclining values
      wsum += w;

    }

    // provides a relative position or weight
    // for each y-coordinate in the total path
    y /= wsum;

    //y = Math.sin(x * frequency) * amplitude;
    ctx.lineTo(x, y+cy); 
  }
  ctx.stroke();
}
Draw();

var
cw=cvs.width=window.innerWidth，
ch=cvs.height=window.innerHeight，
cx=cw/2，
cy=ch/2，
xs=Array（），
ys=数组（），
npts=20，
振幅=87，//可以是1到100之间的val
frequency=-2，//可以是-10到1之间的val，步长为0.1
ctx.lineWidth=4
//创建一个坐标数组
//将页面分成规则部分
//创建权重数组
对于（变量i=0；i
这是我的答案。请阅读代码中的注释。我希望这就是你需要的


//启动画布
const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=（canvas.width=600），
cx=cw/2；
设ch=（canvas.height=400），
cy=ch/2；
ctx.fillStyle=“白色”
//定义矩形的角点
让角点=[[100100]、[500100]、[500300]、[100300]；
设振幅=20；//振荡幅度
让速度=0.01；//振荡的速度
设点=[]；//绘制曲线的点阵列
类点{
建造商（x、y、hv）{
//该点围绕该点振荡（cx，cy）
这是cx=x；
这个.cy=y；
//电流振荡角
this.a=Math.random（）*2*Math.PI；
this.hv=hv；//用于了解振荡是水平还是垂直的变量
这个.update（）；
}
//用于更新角度值的函数
更新（）{
这个.a+=速度；
如果（this.hv==0）{
this.x=this.cx；
this.y=this.cy+amplitud*Math.cos（this.a）；
}否则{
this.x=this.cx+amplitud*Math.cos（this.a）；
this.y=this.cy；
}
}
}
//将从a到b的直线分成n段的函数
//我使用生成的点创建一个新的点对象，并将这个新点推送到点数组中
函数除法（n，a，b）{
对于（var i=0；i{
p、 更新（）；
});
绘制曲线（）；
}
Draw（）
canvas{边框：1px实心；背景：#6ab150}
形状有任何限制吗？是否给出了波浪形的路径应该大致遵循？@LutzL它应该是矩形的大致近似值（或者屏幕的
clientWidth
恰好是什么）。它几乎应该像是页面周围的边框。它应该像在电子游戏中一样代表战争的迷雾。但是我想使波浪线成为动态的，并且能够调整绿色部分的厚度，或者换句话说，缩小“矩形”可见区域也会很好。@LutzL有点像边框，但是沿着内部边缘波浪，而不是直线，但可能有点波浪。我计划使波浪动态化，同时我还计划使其外缘不透明，然后在离中心越近时逐渐变为透明。我要上床睡觉了，但我明天再回来看看。非常感谢，我自己还没有看过所有的代码，但是有没有办法应用渐变，使绿色部分与白色部分相交的动态内边缘始终是透明的，外部完全是绿色的，换句话说，内部绿色区域的一半始终是半透明的？这有意义吗？在演示中，有一块绿色背景的画布和一个白色填充的波浪形状。您可以将形状的填充样式更改为渐变，但恐怕这不是您想要的。请看一看这支钢笔：也许这就是你需要的。@enxaneta回答得很好！总是对你的答案感兴趣。是的，这就是我所说的。在那里，战争边界的迷雾不再有坚实的边缘，而是渗透到中间。我知道我可以做一些类似的堆叠层，或者可能使用一个面具，就像在那个演示中一样，只是设置面具位置的动画。这可能是最简单的方法