Javascript 为什么我的画布框在单击时的移动会增加？

Js Fiddle附带了一个框，可以在其中单击鼠标。它在大部分情况下都能正常工作。除了每次在画布上绘制一个新的长方体外，每次都会越来越快，以至于速度过快

我已经

console.log

ed了

dx/dy

值，它们的值没有增加，所以我认为不是这样

dx值是长方体移动的方向

有人能透露一些信息吗

var canvas=document.getElementById（'myCanvas'）；
var logger=document.getElementById（'logger'）；
var ctx=canvas.getContext（'2d'）；
var x=0；
var y=0；
var dx=-2；
var-dy=-2；
var boxcolor='#'+（Math.random（）*0xFFFFFF我认为您的requestAnimationFrames没有被清除，所以每次单击时，您的动画函数都会被越来越频繁地调用。我对下面的代码做了一个小的更改，这似乎很有帮助


var canvas=document.getElementById（'myCanvas'）；
var logger=document.getElementById（'logger'）；
var ctx=canvas.getContext（'2d'）；
var x=0；
var y=0；
var dx=-2；
var-dy=-2；
var boxcolor='#'+（Math.random（）*0xFFFFFF我认为您的requestAnimationFrames没有被清除，所以每次单击时，您的动画函数都会被越来越频繁地调用。我对下面的代码做了一个小的更改，这似乎很有帮助


var canvas=document.getElementById（'myCanvas'）；
var logger=document.getElementById（'logger'）；
var ctx=canvas.getContext（'2d'）；
var x=0；
var y=0；
var dx=-2；
var-dy=-2；
var-boxcolor='#'+（Math.random（）*0xFFFFFF，因为每次鼠标点击，您都会再次调用
draw
，而这个调用，正如代码中明显的那样，是递归的，并且会不断调用自己。因此，每次点击，您都会有一系列调用
draw

您可以添加一个布尔值来检查最初是否调用了
draw
，如果是，请防止在
draw
函数中进行后续调用：

if(!initialized)
{
    requestAnimationFrame(draw);
    initialized = true;
}

因为每次鼠标点击，您都会再次调用
draw
，而这个调用，正如您的代码中所显示的，是递归的，并且会不断地调用自己。因此，每次点击，您都会有一系列对
draw
的调用

您可以添加一个布尔值来检查最初是否调用了
draw
，如果是，请防止在
draw
函数中进行后续调用：

if(!initialized)
{
    requestAnimationFrame(draw);
    initialized = true;
}

谢谢。工作很有魅力。标记为及时和简单的正确答案。非常感谢。谢谢。工作很有魅力。标记为及时和简单的正确答案。非常感谢。