javascript - 我的小程序不是绘制 lisajouss 图形而是正弦函数

Question

我正在尝试绘制李萨如图形，但我的程序却只绘制了一个正弦函数，为什么？

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctxt = canvas.getContext('2d');



var x;
var y;
var STARTi = -1000;
var MAXi = 1000;
var yOffset = canvas.height / 2;
var xOffset = canvas.width / 2;
var xAmp = 2;
var yAmp = 3;
var xFreq = 6;
var yFreq = 4;
var phaseDiff = (Math.PI / 2);

//X-Axis
ctxt.beginPath();
ctxt.setLineDash([5, 15]);
ctxt.moveTo(0, canvas.height / 2);
ctxt.lineTo(canvas.width, canvas.height / 2);
ctxt.strokeStyle = "rgba(169,169,169)"
ctxt.stroke();

//y-Axis
ctxt.beginPath();
ctxt.setLineDash([5, 15]);
ctxt.moveTo(canvas.width / 2, 0);
ctxt.lineTo(canvas.width / 2, canvas.height);
ctxt.strokeStyle = "rgba(169,169,169)"
ctxt.stroke();


ctxt.setLineDash([0, 0]);

function xCoord(a) {
  return 100 * (xAmp * Math.sin(xFreq * (0.3 * a * Math.PI / 180)));
}

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

x = xCoord(STARTi);
y = yCoord(x);
ctxt.beginPath();
ctxt.moveTo(x + xOffset, y + yOffset)

for (i = STARTi; i < MAXi; i++) {


  ctxt.moveTo(x + xOffset, y + yOffset)
  x = xCoord(i);
  y = yCoord(x);
  ctxt.lineTo(x + xOffset, y + yOffset)



}
  ctxt.strokeStyle = "black"; 
ctxt.stroke();

我是否需要更改曲线公式的格式设置方式，还是有其他问题，因为据我所知，程序似乎忽略了 xCoord 公式，只是输入了一个正常数字。

Answer 1

您将计算出的 x 坐标作为 y 坐标函数的参数传递，但您应该传递 i:

x = xCoord(STARTi);
y = yCoord(STARTi);
ctxt.beginPath();
ctxt.moveTo(x + xOffset, y + yOffset)

for (i = STARTi; i < MAXi; i++) {


  ctxt.moveTo(x + xOffset, y + yOffset)
  x = xCoord(i);
  y = yCoord(i);
  ctxt.lineTo(x + xOffset, y + yOffset)



}