javascript - HTML Canvas 留下不必要的痕迹

我正在尝试使用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();

提前致谢！

最佳答案

放一个

moveTo(x + pointSize, y);

每个之前

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

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

关于javascript - HTML Canvas 留下不必要的痕迹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53280736/