Javascript 在html画布上显示延时后的图像

我有一个动画，完成后生成一个静态图像。我想这张图片显示5秒钟左右，然后再换成另一张静止图片。我尝试过各种setTimeout的实现来解决这个问题，但它对我来说并不奏效

任何帮助都将不胜感激

这是我的密码：

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  <!--ctx.clearRect(0, 0, cw, ch); -->
  image3 = new Image();
  image3.src = "broken1.png";
  ctx.drawImage(image3, 0, 0);
  setTimeout(function() {
    image4 = new Image();
    image4.src = "broken.png";
    ctx.drawImage(image4, 0, 0);
  }, 5000);
}())

---

Felix Kling是对的，您应该将图形包装在一个onload回调中。请看下面的代码。我想是的

我删除了requestAnimationFrame以简化代码，但我认为这不是问题所在

$function{ 多功能并条机{ //window.requestAnimationFramedrawFrame，画布； var c=document.getElementByIdcontainer； var ctx=c.getContext2d； //ctx.clearRect0，0，cw，ch； image3=新图像； image3.onload=函数{ ctx.drawmagethis，0，0； //console.logloaded； }; 图像3.src=http://placehold.it/300x300; setTimeoutfunction{ image4=新图像； image4.onload=函数{ ctx.drawmagethis，0，0； }; 图像4.src=https://placekitten.com/g/300/300; }, 5000; } 牵引架； };

---

您当前的代码具体是做什么的？上面的当前代码只显示第一个图像brokern1.png，然后它似乎停止并不会显示下一个图像。请检查此项。它对iframe也有同样的作用，但这也适用于图像。问题是在绘制图像之前必须加载图像吗？可能是的。如果从代码中删除了超时功能，那么它将跳过图3，直接转到图4。那么简单的window.onload是一个可行的解决方案吗？