JavaScript绘制李萨如曲线看起来像是一团糟

我正在尝试使用画布和图形绘制李萨如曲线。我已经把公式放进去了，但是画布看起来像一团乱麻，而不是画漂亮的曲线。我当前使用的代码是：

<canvas id="myCanvas" width="720" height="720" style="border:1px solid #d3d3d3;">
<script src="canvas.js"> </script>

对我来说：

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctxt=canvas.getContext（'2d'）；
var x；
变量y；
var-STARTi=0；
var MAXi=100；
var yOffset=canvas.height/2；
var xOffset=canvas.width/2；
var-xAmp=2；
var-yAmp=3；
var xFreq=6；
var-yFreq=3；
var phaseDiff=Math.PI/2；
//X轴
ctxt.beginPath（）；
ctxt.setLineDash（[5,15]）；
ctxt.moveTo（0，canvas.height/2）；
ctxt.lineTo（canvas.width、canvas.height/2）；
ctxt.strokeStyle=“rgba（169）”
ctxt.stroke（）；
//y轴
ctxt.beginPath（）；
ctxt.setLineDash（[5,15]）；
ctxt.moveTo（canvas.width/2,0）；
ctxt.lineTo（canvas.width/2，canvas.height）；
ctxt.strokeStyle=“rgba（169）”
ctxt.stroke（）；
ctxt.setLineDash（[0,0]）；
函数xCoord（a）{
返回100*（xAmp*Math.sin（xFreq*（0.4*a）+phaseDiff））；
}
功能yCoord（a）{
return-100*（yAmp*数学sin（yFreq*（0.4*a））；
}
x=xCoord（STARTi）；
y=yCoord（x）；
ctxt.beginPath（）；
ctxt.moveTo（x+xOffset，y+yOffset）
对于（i=STARTi；i

我试图让这些曲线，我已经尝试过的事情，如使增加的价值如此之小，它最终会看起来平滑：没有工作，只是崩溃了我的浏览器最终。 我还尝试使用

Arc

属性绘制这些线。这给了我一些平滑的线条，但不是那些看起来像利萨霍斯曲线的线条。我相信这主要是因为我不知道其他所需参数需要输入哪些值或变量

我希望这是一个有点清楚我有什么问题。

---

提前感谢你的帮助

JavaScript中的所有角度操作都使用弧度[0,2×π>，但是

xCoord（）

和

yCoord（）

函数使用度[0,360>

简单地使用弧度代替或在函数内转换：

function xCoord(a) {
  // "a" converted from degree to radian       _________________
  return 100 * (xAmp * Math.sin(xFreq * (0.4 * a * Math.PI / 180) + phaseDiff));
}

function yCoord(a) {
  return -100 * (yAmp * Math.sin(yFreq * (0.4 * a * Math.PI / 180)));
}

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctxt=canvas.getContext（'2d'）；
var x；
变量y；
var-STARTi=0；
var MAXi=100；
var yOffset=canvas.height/2；
var xOffset=canvas.width/2；
var-xAmp=2；
var-yAmp=3；
var xFreq=6；
var-yFreq=3；
var phaseDiff=Math.PI/2；
//X轴
ctxt.beginPath（）；
ctxt.setLineDash（[5,15]）；
ctxt.moveTo（0，canvas.height/2）；
ctxt.lineTo（canvas.width、canvas.height/2）；
ctxt.strokeStyle=“rgba（169）”
ctxt.stroke（）；
//y轴
ctxt.beginPath（）；
ctxt.setLineDash（[5,15]）；
ctxt.moveTo（canvas.width/2,0）；
ctxt.lineTo（canvas.width/2，canvas.height）；
ctxt.strokeStyle=“rgba（169）”
ctxt.stroke（）；
ctxt.setLineDash（[0,0]）；
函数xCoord（a）{
返回100*（xAmp*Math.sin（xFreq*（0.4*a*Math.PI/180）+phaseDiff））；
}
功能yCoord（a）{
return-100*（yAmp*Math.sin（yFreq*（0.4*a*Math.PI/180））；
}
x=xCoord（STARTi）；
y=yCoord（x）；
ctxt.beginPath（）；
ctxt.moveTo（x+xOffset，y+yOffset）
对于（i=STARTi；i

---

如果您正确地缩进代码，确实可以帮助我们。这有助于沟通结构并简化阅读。

function xCoord(a) {
  // "a" converted from degree to radian       _________________
  return 100 * (xAmp * Math.sin(xFreq * (0.4 * a * Math.PI / 180) + phaseDiff));
}

function yCoord(a) {
  return -100 * (yAmp * Math.sin(yFreq * (0.4 * a * Math.PI / 180)));
}