Javascript 在画布中绘制三角形曲线

正如你所看到的，我试着将三角公式转换成代码，但为什么它不起作用呢？我想知道我做错了什么，因为公式和维基百科文章中的公式完全一样

const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.translate(150, 75);
var t = 0;
var a = 100;
var b = 80;

function y(t) { 
    return (b-a) * Math.cos(t) + Math.acos(((b-a) / a) * t);
}

function x(t) { 
    return (b-a) * Math.sin(t) - Math.asin(((b-a) / a) * t);
}
var nx = 0;
var ny = 0;

function animate() {
    t += 0.1;

  ctx.beginPath();
  ctx.moveTo(nx, ny);
  ctx.lineTo(x(t), y(t));
  ctx.stroke();

    nx = x(t);
  ny = y(t);
  console.log(ny)
  requestAnimationFrame(animate);
}
animate();

---

您使用的是

arcin

和

arccos

而不是

a*sin

和

a*cos

。对代码进行如下更改，以获得一条实际上看起来像三角形曲线的曲线：

var a = 20;
var b = 3 * a;

function x(t) { 
    return (b-a) * Math.cos(t) + a * Math.cos(((b-a) / a) * t);
}

function y(t) { 
    return (b-a) * Math.sin(t) - a * Math.sin(((b-a) / a) * t);
}

链接到

---

注：维基百科的文章使用了

b=3*a。

我在小提琴中也使用了同样的方法。

嗨，我刚注意到在画完三角肌后，它又在同一点上画了同样的线。你可以看到这条线越来越粗。我认为它会不断地把它画出来，除非你设定一个条件让它停止冷却。谢谢你的解释。我根本没有看代码，只是觉得它可能不需要。啊，对不起，我把它解释错了。我还以为是acos呢