HTML画布留下了不必要的痕迹

Question

我正在尝试使用HTML canvas和JS绘制Bifurcation diagram。 这是我的tool。 问题是画布无法正确呈现数据。

这里是图表的外观以及使用我的代码实际呈现的方式的比较： 这是函数的放大区域：

我遍历了数据集，似乎没有中间值。因此，我的问题是-为什么浏览器为什么在只应绘制的对象之间留下这些不必要的痕迹？ 看起来更像是一种“连接点”图表，而不是离散的数据点图。

这是我用于绘图的代码的一部分：

// ... get elements, calculate data, etc.
canvas.width = 800;
canvas.height = canvas.width / 2;
let xSpread = canvas.width / (rMax - rMin);

for (let i in chartData) {
    let x = (i - rMin) * xSpread * scale;
    for (let j in chartData[i]) {
        let y = canvas.height - (chartData[i][j] * canvas.height * scale);
        ctx.arc(x, y, pointSize, 0, 2 * Math.PI);
    }
}

ctx.fillStyle = "#0a5e8c";
ctx.fill();

谢谢！

Answer 1

放入

moveTo(x + pointSize, y);

每个之前

ctx.arc(x, y, pointSize, 0, 2 * Math.PI);

没有这个，就好像您在画画而没有抬起笔。