在画布上绘制setInterval（）或增量（i+；=）时，Javascript不起作用？（Javascript/编码的新功能）

我正在尝试从画布上单击的位置通过画布设置长方体笔划的动画

正方形在画布上绘制，单击此处，但p&q值/变量未更新/增加

当我运行一个不以clientX和clientY为起始位置的类似函数（）时，它会根据递增的值工作并绘制正方形

感谢您的帮助

var clickx=[]
变量clicky=[]
addEventListener（“单击”，单击信息）；
addEventListener（“单击”，drawSquare1）；
函数clickInfo（）{
j=event.clientX；
k=event.clientY；
点击X。按下（j）
点击按钮（k）
}
函数drawS（）{
p=clickx[0]
q=clicky[0]
ctx.beginPath（）；
ctx.rect（p，q，40，40）；
ctx.strokeStyle=“rgba（0,025,0.5）”；
ctx.stroke（）；
ctx.closePath（）；
P+=5；
q+=5；
}
函数drawSquare1（）{
设置间隔（绘制，5）；
}

变量p和q不会递增，因为每次调用drawS时都会将它们重置为相同的值（正如rgthree所指出的）

要解决此问题，您应该按照以下方式进行设置

var p = 0,
    q = 0;

function drawS() {

    // increase by 5
    p += 5;
    q += 5;

    //... do stuff
}

function drawSquare1() {

    // initial values before loop
    p = clickx[0];
    q = clicky[0];

    // start loop
    setInterval (drawS, 5);
}

---

这里有几件事情不是很好，但最大的问题是

绘图

末尾的增量在下一个

绘图

间隔重置，因为它将它们重新分配给

单击X[0]

和

单击Y[0]

。另外，在递增中有一个大写字母

P

。这不是错误，因为这些行实际上并没有像我所概述的那样做任何事情，但它们指出了这一点。此外，每次运行单击，都会创建一个新的间隔，这将很快变得非常沉重。您应该查看

clearInterval

，然后查看

requestAnimationFrame

，以获得一种更有效的动画计时方法。感谢您快速而全面的回答！我想可能会发生类似的事情，但我不知道如何判断是否发生了。