Question

我创建了一个在画布上生成20个点的循环，我想延迟每个点画。 e.x一个出现，然后等待1秒，然后第二个出现，依此类推...

这是我的生成点的代码：

var canvas = document.getElementById('chaos');
var ctx = canvas.getContext('2d');

const createDot = (x,y) => {
  ctx.beginPath();
  ctx.arc(x, y, 1, 0, 2 * Math.PI, false);
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#fc3';
  ctx.stroke();
}

for(let i=0;i<20;i++) {
  createDot(i, i*2);
}

<canvas id="chaos" width="450" height="450"></canvas>

我要显示这行，每点一个点！

Answer 1

一种选择是将for循环放入async函数中，并让await一个Promise在每次迭代1秒后解析：

var canvas = document.getElementById('chaos');
var ctx = canvas.getContext('2d');
const delay = () => new Promise(res => setTimeout(res, 1000));

const createDot = (x,y) => {
  ctx.beginPath();
  ctx.arc(x, y, 1, 0, 2 * Math.PI, false);
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#fc3';
  ctx.stroke();
  return delay();
}

(async () => {
  for(let i=0;i<20;i++) {
    await createDot(i, i*2);
  }
})();

<canvas id="chaos" width="450" height="450"></canvas>

Answer 2

一种选择是使用setInterval进行重复操作。记录一下互动次数，并在完成后清除它。

var canvas = document.getElementById('chaos');
var ctx = canvas.getContext('2d');

const createDot = (x,y) => {
  ctx.beginPath();
  ctx.arc(x, y, 1, 0, 2 * Math.PI, false);
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#fc3';
  ctx.stroke();
}

let i = 0, n = 20
let timer = setInterval(() => {
   createDot(i, i*2);
   i++
   if(i > n) clearInterval(timer)
}, 200)  // 200 ms (change to 1000 for 1 sec.)

<canvas id="chaos" width="450" height="450"></canvas>

创建点时对点进行动画处理

2 个答案: