Question

我在一个画布上插入许多点（例如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;
}

我考虑过在画布内移动数组，但是也许有更好的方法。

function draw() {
  /* Dimensions of canvas are in the HTML id */
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  Dots();

  // taking x and y from the array
  for (let j=0; j<coordinates.length/2; j++) {
  let Y = 150 - coordinates[2*j+1]; // y axis direction change

  // dots as a 1px rectangle
  ctx.fillRect(coordinates[2*j],Y,1,1);
  }
};

有什么主意吗？

Answer 1

您将舍弃几乎纯函数Dots的结果（除了Math.random调用之外）。而是将其分配给局部变量。

const coordinates = Dots();

在函数内部定义变量时，它们是该函数的局部变量。这意味着coordinates中的Dots变量将不会从draw可见。例如：

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

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

由于对Dots的调用立即完成，因此您可以存储结果，然后通过多次调用draw来设置动画。有关示例，请参见this Pen。

仅将多个对象插入一个画布

1 个答案: