如何在javascript的画布中使用计时器创建循环？

这是我的代码中需要它的部分，但我不知道如何使其无限次，如何添加循环？ 我需要有一个矩形，当我加载页面时，它应该出现在画布中的一个随机位置，每5秒钟一个新的矩形应该出现在一个新的位置，矩形的大小总是相同的

function rectangle(x,y){
    var ctx
    ctx.beginPath();
    ctx.rect(20, 20, 15, 10);
    ctx.stroke();
    }
 function randomMove(){
    var myVar;
    var x;
    var y;
    x = Math.floor(Math.random() * 10) + 1;
    y = Math.floor(Math.random() * 10) + 1;
    myVar = setInterval( ()=> {rectangle(x,y)}, 5000); // pass the rectangle function
    }

---

你需要的是递归调用你的

randomMove

函数；这样，您将生成无限循环，该循环将每5秒渲染一个新矩形：

函数随机移动（）{
常数x=数学地板（数学随机（）*10）+1；
常数y=数学楼层（数学随机（）*10）+1；
矩形（x，y）；//定义矩形
设置超时（（）=>{
randomMove（）//在递归迭代之前等待5s
}, 5000)
}

此外，如果要在绘制新矩形之前删除以前的矩形，则需要：

在

矩形

函数外定义画布上下文（ctx），以便您可以直接在

随机移动

内访问它

在调用

rectangle

函数清除上一个图形之前定义此位：

ctx.clearRect（0，0，canvas.width，canvas.height）；

工作示例：

var canvas=document.querySelector（'canvas'）；
画布宽度=300；
帆布高度=150；
var ctx=canvas.getContext（'2d'）；
设置间隔（drawRect，500，ctx）；
函数drawRect（ctx）{
var x=Math.floor（Math.random（）*ctx.canvas.width）+1；
var y=Math.floor（Math.random（）*ctx.canvas.height）+1；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.fillStyle='#ff0000'；
ctx.fillRect（x，y，15，10）；
}

---

在间隔内而不是在间隔外生成随机数，否则它们将始终保持相同的

x

和

y

在html中添加代码片段，这将有助于其他人。您是指setTimeout而不是setInterval吗？很好，将立即进行编辑