Javascript 仅在一个画布中插入多个对象

我有一个问题，插入许多点（例如10000）到只有一个画布。它们必须一个接一个地出现在屏幕（画布）上，并在函数Dots（）运行期间保持不变。每个点的位置（x，y）是随机的：

function Dots() {
  let coordinates = new Array();
  for (let i = 1; i <= 10000; i++) {
    /* Double using because x nad y value must be calculate separately! */
    let x = Math.round(Math.random() * 150);
    let y = Math.round(Math.random() * 150);
    coordinates.push(x,y);
  }
  return coordinates;
}

函数点（）{
设坐标=新数组（）；
例如（设i=1；i您正在丢弃几乎纯函数的结果
Dots
（除了Math.random调用）。而是将其分配给局部变量

const coordinates = Dots();

在函数中定义变量时，它们是该函数的局部变量。这意味着
点中的
坐标
变量将无法从
绘图中看到。例如：

let foo = 42;
(() => { let foo = 56; })();
console.log(foo); // Logs 42

调用
ctx.moveTo
也是多余的，仅用于绘制路径。请参阅参考

由于对
Dots
的调用会立即完成，因此您可以存储结果，然后通过多次调用draw来设置动画。请参见示例。
然后常量的名称将与返回的数组-“坐标”相同这无关紧要，因为它们在不同的范围内。请参阅我更新的答案。我理解，但为不同的东西（变量和数组）提供相同的名称可能会在以后出错（代码将大得多）.但是好的。关于主主题呢？好的，它起作用了。我最近也尝试在HTML中输入点的数量，但我的代码不起作用。让progress=（I/10000）*100；document.getElementById（'progress'）。textContent=
${progress}
；您是否将其粘贴在Dots函数中？正如我所说，它会立即返回。我已更新笔以使用生成器函数，我认为该函数更接近您想要实现的功能。
let foo = 42;
(() => { let foo = 56; })();
console.log(foo); // Logs 42