Question

我正在尝试使用画布和javascript绘制lissajous曲线。我已经把公式放入了，但画布看起来像是一个完整的混乱，而不是画出漂亮的曲线。我目前使用的代码是：

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

我的javascript：

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

var x;
var 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-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.4 * a) + phaseDiff));
}

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

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();
}

我试图让这些变得弯曲，我尝试过这样的事情，比如将价值增加到如此之小以至于最终看起来很平滑：没有工作，最终崩溃了我的浏览器。我还尝试使用Arc属性绘制这些行。这给了我一些流畅的线条，但不是那些看起来像lisajous曲线的线条。我相信这主要是因为我不知道需要输入其他所需参数的值或变量。

我希望我有点清楚我有什么问题。在此先感谢所有的帮助。 ;）

Answer 1

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;
var 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-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.4 * a * Math.PI / 180) + phaseDiff));
}

function 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)

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"; // can be set right before stroked.
ctxt.stroke(); // call this outside the loop, otherwise the lines will
               // overdraw eachother per iteration making it look pixelated

<canvas id="myCanvas" width="720" height="720" style="border:1px solid #d3d3d3;">

JavaScript绘制lissajous曲线看起来像完全混乱

1 个答案: