使用canvas(2d)+js实现一个简单的傅里叶级数绘制方波图

const getCircles = (N = 10) => {  const ret = [];  for (let i = 0; i < N; i += 1) {    ret.push({ r: 100 / (i * 2 + 1), ω: i * 2 + 1, φ: 0 });  }  return ret;};const circles = getCircles(30);

let x = 0;    let y = 0;    circles.forEach((c) => {      drawCircle(ctx, x, y, c);      const st = { x, y };      x += c.r * Math.cos((c.ω * idx * Math.PI) / 180);      y += c.r * Math.sin((c.ω * idx * Math.PI) / 180);      const sp = { x, y };      drawVector(ctx, st, sp);    });    points.push(x);    points.push(y);

function drawSolve(ctx, data, k = null, color = null) {  if (k === null) k = 1;  var size = data.length;  var last = size - 4;  ctx.strokeStyle = color || "#Fff0f0";  ctx.beginPath();  ctx.moveTo(data[0], data[1]);  for (var i = 0; i < size - 2; i += 2) {    var x0 = i ? data[i - 2] : data[0];    var y0 = i ? data[i - 1] : data[1];    var x1 = data[i + 0];    var y1 = data[i + 1];    var x2 = data[i + 2];    var y2 = data[i + 3];    var x3 = i !== last ? data[i + 4] : x2;    var y3 = i !== last ? data[i + 5] : y2;    var cp1x = x1 + ((x2 - x0) / 6) * k;    var cp1y = y1 + ((y2 - y0) / 6) * k;    var cp2x = x2 - ((x3 - x1) / 6) * k;    var cp2y = y2 - ((y3 - y1) / 6) * k;    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);  }  ctx.stroke();}

pssine.unshift(y);    if (pssine.length > canvas.height * canvas.width) {      pssine.pop();    }    const pp = [];    pssine.forEach((p, i) => {      pp.push(i / 2 + 200);      pp.push(p);    });    drawSolve(ctx, pp, null, "#0000ff");