javascript setTimeout（）工作不正常

我试图使一个网站，以直观地显示中点线算法的工作。我想在特定的时间间隔后显示点，但是setTimeout（）函数工作不正常。它只是在等待3秒钟后显示最终结果

window.onload=函数（）{
var ltpc=document.getElementById（'ltpcanvas'）；
ltpc.width=window.innerWidth；
ltpc.height=window.innerHeight；
var context=ltpc.getContext（'2d'）；
变量cx1，cx2，cy1，cy2；
var计数=0；
ltpc.addEventListener（'mousedown'，'onDown'，false）；
函数onDown（事件）{
计数++；
cx=event.pageX；
cy=event.pageY；
cy-=9；
cx-=9；
如果（计数=1）{
cx1=cx；
cy1=cy；
}
否则{
cx2=cx；
cy2=cy；
}
var ltpc=document.getElementById（'ltpcanvas'）；
var context=ltpc.getContext（'2d'）；
context.fillStyle='black'；
context.beginPath（）；
arc（cx，cy，2,0*Math.PI，2*Math.PI，true）；
closePath（）；
context.fill（）；
if（cx1！=未定义&&cx2！=未定义&&cy1！=未定义&&cy2！=未定义）{
如果（cx1
我想在特定的时间间隔后显示点

这里重要的一点是，我们不希望显示“点”，而是在间隔后显示“每个点”。这意味着每个点都将自己绘制。我假设您希望这些点在动画中一个接一个地出现

问题在于，在此代码中，我们使用相同的目标延迟多次调用
setTimeout（）
。即，我们告诉引擎“在3秒钟内完成此操作”在一个瞬间内多次。获取动画的最简单解决方案是传递越来越高的超时。由于我们在循环中调用函数，并且其中已经有一个计数变量，因此我们可以重用它，并要求JS引擎在上一个点10毫秒后绘制每个点

下面的代码以每秒100像素的速度绘制一条线

PS：我删除了主体边距，因此不再需要从光标位置减去主体边距


window.onload=function（）{
var ltpc=document.getElementById（'ltpcanvas'）；
ltpc.width=window.innerWidth；
ltpc.height=window.innerHeight；
var context=ltpc.getContext（'2d'）；
变量cx1，cx2，cy1，cy2；
var计数=0；
ltpc.addEventListener（'mousedown'，'onDown'，false）；
函数onDown（事件）{
计数++；
cx=event.pageX；
cy=event.pageY；
如果（计数=1）{
cx1=cx；
cy1=cy；
}
否则{
cx2=cx；
cy2=cy；
}
var ltpc=document.getElementById（'ltpcanvas'）；
var context=ltpc.getContext（'2d'）；
context.fillStyle='black'；
context.beginPath（）；
arc（cx，cy，2，0*Math.PI，2*Math.PI，true）；
closePath（）；
context.fill（）；
if（cx1！=未定义&&cx2！=未定义&&cy1！=未定义&&cy2！=未定义）{
if（cx1

正文{
保证金：0；
}