Javascript Canvas 问题：为什么我在 canvas 上的点与图表的高度不正确对应？

Question

我正在尝试使用看起来像典型折线图的 canvas 制作折线图，并使用我们在代数中学到的典型笛卡尔坐标；左下角0,0开始，x轴位置由要绘制的项目数决定。

然而，点的位置与输入不匹配（虽然图形的形状是正确的，表明我做对了）。我做错了什么？

我已经重写并调整了无数次转换公式

function newLineGraph(parent, width, height, dataArray) {
    //this makes the element using my own code, no observable error here
    var canvas = newCanvas(parent, width, height);
    var canvasContext = canvas.getContext("2d");

    var spaceBetweenEntries = width / dataArray.length;

    var largestNumber = findHighestNumber(dataArray);

    canvasContext.beginPath();
    canvasContext.moveTo(0, 0);

    var n = 0;
    while (dataArray[n]) {

        var x = spaceBetweenEntries * n;
        var y = height - dataArray[n];
        console.log("x,y", x, y);
        canvasContext.lineTo(x, y);
        n++;
    }
    canvasContext.stroke();

    return canvas;
}

编辑：修复了图像，以便您可以看到 canvas 大小

生成的图比预期的图小得多；例如 newLineGraph("body",55,45,[1,40,10]); 生成一个角落有一个小 ^ 形状的图形，而不是从底部开始。但是，控制台日志显示 " 0 44" "18.333333333333332 5","36.666666666666664 35"，我认为应该会生成一个非常适合整个图表的图表。

Answer 1

~~第一个 lineTo 的 x 始终为 0，所以我假设第一行没有按照您的预期绘制。它更像是 |/\ 形状而不是 \/\。像这样设置 x:~~

~~var x = spaceBetweenEntries * (n + 1);~~

编辑

正如您在此 fiddle 中看到的那样，您的图表会根据您发布的坐标在正确的点呈现。我按照预期的方式实现了 newCanvas 函数。那么我们是否遗漏了一些其他修改 canvas width 和 height 的代码？

function newCanvas(parent, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  document.querySelector(parent).appendChild(canvas);
  return canvas;
}

Answer 2

问题是使用 style.width 和 style.height 修改 canvas 高度，而不是 canvas.height 和 canvas.width

Javascript Canvas 问题：为什么我在 canvas 上的点与图表的高度不正确对应？

Javascript Canvas issue: Why do my points on the canvas not correspond properly to the height of the graph?

javascript

canvas

plot

points

linegraph