javascript - 图表不是绘图

Question

我构建了一个 JavaScript P5.js 程序来绘制图表。除了点不会出现在显示屏上之外，一切正常，并且当它们出现时，它们并不遵循图表应有的趋势。

function setup() {
  H = 800;
  W = 800;
  wFreq = 20;
  hFreq = 20;
  wDist = H / hFreq;
  hDist = W / wFreq;
  uLength = 10;
  
  createCanvas(W, H);
}

function formula(x) {
  return x*x
}

function draw() {
  background(220);
  translate(0, 0)
  
  rect(0, H/2, W, 0);
  rect(W/2, 0, 0, H);
  
  translate(0, H/2);
  for(i = W/2; i -= 1; i > 0) {
    rect((i-0.5) * wDist /2, -uLength/2, 0, uLength);
  }
  
  translate(W/2, -H);
  for(i = H/2; i -= 1; i > 0) {
    rect(-uLength/2,i * (hDist -1) /(4*(10/hFreq)), uLength, 0);
  }
  
  translate(200, 200);
  for(i = -wFreq; i += 1; i < wFreq) {
      rect(i*wDist, formula(i), 1, 1);
  }
}

Answer 1

请注意，您对 translate() 的调用会堆栈。

我不确定您希望点显示在哪里，但为了帮助您调试，如果将您的 translate(200, 200); 调用更改为 translate(400, 400); 代替。

您必须使用传入的值才能达到您想要的效果。您可能还想在 the reference 中查找 push() 和 pop() 函数。 .

您也可以考虑根本不使用 translate()，而是直接在绘图代码中使用坐标。