Я пытаюсь нарисовать фигуру lisajouss, но вместо этого моя программа просто рисует синусоидальную функцию, почему?
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 и просто ставит нормальное число.
Вы передаете вычисленную координату 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)
}