Javascript HTML画布留下不需要的痕迹

我正在尝试使用HTML画布和JS绘制图形。 这是我的。 问题是画布不能准确地呈现数据

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

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

以下是我用于绘图的代码部分：

// ... 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);

---

没有这一点，就好像你不提笔就在画画。

Hi@kbo。。。我真的认为您需要在如此复杂的图形中使用

beginPath

和

closePath

（）不客气：）。如果是这样的话，你会接受我的答案吗（通过绿色的勾号图标）？应该是

ctx.arc（x+pointSize，y…

，否则你会从中心画一条线到弧的起始位置（在3点钟）。用fill（）不会很明显，但用stroke（）肯定会@kaido是的，但在这种特殊情况下，弧函数用于绘制填充点，我认为求和将是一个冗余操作。该操作无论如何都是由浏览器完成的。我没有做性能测试，但如果避免使用此lineTo，将获得一个胜利也就不足为奇了。t.m.我试图接受，但我缺乏15个声誉。W当我得到它时，我肯定会做的。：）