Javascript 创建点时设置点的动画

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

以下是我生成圆点的代码：

var canvas=document.getElementById（'chaos'）；
var ctx=canvas.getContext（'2d'）；
常数createDot=（x，y）=>{
ctx.beginPath（）；
弧（x，y，1，0，2*Math.PI，false）；
ctx.lineWidth=1；
ctx.strokeStyle='#fc3'；
ctx.stroke（）；
}
对于（设i=0；i一个选项是将
for
循环置于
async
函数中，并
wait
a
Promise
在每次迭代1秒后解析：


var canvas=document.getElementById（'chaos'）；
var ctx=canvas.getContext（'2d'）；
常量延迟=（）=>新承诺（res=>setTimeout（res，1000））；
常数createDot=（x，y）=>{
ctx.beginPath（）；
弧（x，y，1，0，2*Math.PI，false）；
ctx.lineWidth=1；
ctx.strokeStyle='#fc3'；
ctx.stroke（）；
返回延迟（）；
}
（异步（）=>{
对于（设i=0；i一个选项是将
for
循环置于
async
函数中，并
wait
a
Promise
在每次迭代1秒后解析：


var canvas=document.getElementById（'chaos'）；
var ctx=canvas.getContext（'2d'）；
常量延迟=（）=>新承诺（res=>setTimeout（res，1000））；
常数createDot=（x，y）=>{
ctx.beginPath（）；
弧（x，y，1，0，2*Math.PI，false）；
ctx.lineWidth=1；
ctx.strokeStyle='#fc3'；
ctx.stroke（）；
返回延迟（）；
}
（异步（）=>{
对于（设i=0；i一个选项是使用
setInterval
进行重复操作。记下有多少次交互，并在完成后清除


var canvas=document.getElementById（'chaos'）；
var ctx=canvas.getContext（'2d'）；
常数createDot=（x，y）=>{
ctx.beginPath（）；
弧（x，y，1，0，2*Math.PI，false）；
ctx.lineWidth=1；
ctx.strokeStyle='#fc3'；
ctx.stroke（）；
}
设i=0，n=20
let timer=setInterval（（）=>{
createDot（i，i*2）；
我++
如果（i>n）清除间隔（计时器）
}，200）//200毫秒（更改为1000秒）
一个选项是使用
setInterval
进行重复操作。记下有多少次交互，并在完成后清除


var canvas=document.getElementById（'chaos'）；
var ctx=canvas.getContext（'2d'）；
常数createDot=（x，y）=>{
ctx.beginPath（）；
弧（x，y，1，0，2*Math.PI，false）；
ctx.lineWidth=1；
ctx.strokeStyle='#fc3'；
ctx.stroke（）；
}
设i=0，n=20
let timer=setInterval（（）=>{
createDot（i，i*2）；
我++
如果（i>n）清除间隔（计时器）
}，200）//200毫秒（更改为1000秒）