我构建了一个 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);
}
}
最佳答案
请注意,您对 translate()
的调用会堆栈。
我不确定您希望点显示在哪里,但为了帮助您调试,如果将您的 translate(200, 200);
调用更改为 translate(400, 400);
代替。
您必须使用传入的值才能达到您想要的效果。您可能还想在 the reference 中查找 push()
和 pop()
函数。 .
您也可以考虑根本不使用 translate()
,而是直接在绘图代码中使用坐标。
关于javascript - 图表不是绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53398888/