我的小程序不是绘制一个lisajouss数字,而是一个正弦函数

时间:2017-12-04 14:47:13

标签: javascript canvas

我正在尝试绘制一个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公式并且只是放入正常数字。

1 个答案:

答案 0 :(得分:1)

您将计算出的message($$replace(QMAKE_FILE_PATH, \\\\, /)) 坐标作为x坐标函数的参数传递,但您应该传递y

i