Javascript HTML画布-间隔后绘制形状

下面的脚本绘制了4个带有图像的弯曲矩形。尽管在调用绘制它们的函数之前使用了

2500

毫秒的

setInterval

，它还是会一次绘制所有的代码。我希望立即绘制第一个矩形（即左上角），然后在该矩形之后绘制其他矩形（每2.5秒绘制一个）。为什么此函数不执行此操作？如何执行此操作？任何帮助都将不胜感激

var c=document.getElementById（'game'），
ctx=c.getContext（'2d'）；
var images=['https://i.stack.imgur.com/tXmPa.png', 'https://i.stack.imgur.com/KGhCL.png', 'https://i.stack.imgur.com/s5xu4.png', 'https://i.stack.imgur.com/g6BO0.jpg']
var curvedRect=函数（id、selectionnum、x、y、w、h）{
this.id=id；
this.selectionnum=selectionnum；
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
}
curvedRect.prototype.makeCurvedRect=函数（）{
var img=新图像（）；
img.src=images[this.selectionnum]；
ctx.beginPath（）；
ctx.lineWidth='8'；
ctx.strokeStyle='white'；
ctx.moveTo（此.x+10，此.y）；
ctx.lineTo（此.x+此.w-10，此.y）；
ctx.二次曲线（this.x+this.w，this.y，this.x+this.w，this.y+10）；
ctx.lineTo（this.x+this.w，this.y+this.h-10）；
ctx.二次曲线（this.x+this.w，this.y+this.h，this.x+this.w-10，this.y+this.h）；
ctx.lineTo（this.x+10，this.y+this.h）；
ctx.二次曲线（this.x，this.y+this.h，this.x，this.y+this.h-10）；
ctx.lineTo（这个.x，这个.y+10）；
ctx.二次曲线（this.x，this.y，this.x+10，this.y）；
ctx.stroke（）；
ctx.drawImage（img，this.x+2.5，this.y+2.5，this.w-5，this.h-5）；
}
var Paint=函数（元素）{
this.element=元素；
this.shapes=[]；
}
Paint.prototype.addShape=函数（形状）{
这个。形状。推（形状）；
}
Paint.prototype.render=函数（）{
clearRect（0，0，this.element.width，this.element.height）；
对于（var i=0；i

setInterval(this.shapes[i].makeCurvedRect(), 2500);

它立即执行
makeCurvedRect（）
，并为
setInterval（）
提供带有绑定函数的返回值

setTimeout(curvedRect.prototype.makeCurvedRect.bind(this.shapes[i]), 2500 * i);

或者一个胖箭头函数

setTimeout(() => this.shapes[i].makeCurvedRect(), 2500 * i);

其中，每个矩形的延迟增加2500