使用javascript在短暂暂停/延迟后加载新页面

我对javascript非常陌生，正在尝试模拟一个简单的动画，我想加载一个html页面，该页面的画布上有一些图形，然后等待3秒钟，在现有图形的基础上加载另一组图形，使其看起来像一个模拟。我已经尝试过使用setTimeout，但在所有迭代结束后，它仍然无法生效。我想知道帆布是否有什么特别的东西需要考虑

---

谢谢

您可以使用javascript的以下功能

setTimeout(
  function() 
  {
    //do something special
  }, 3000);

---

在这种情况下，3000是3000毫秒，因此可以增加或减少它。

您可以创建一个变量displayRects，并在绘图函数

中执行if（displayRects）{
//画矩形
}

并在加载文档之前执行以下操作：

setTimeout(function(){displayRects = true},3000);

---

谢谢，马努，我试过了，但它就是停不下来（它在所有fillRect中运行，然后才暂停。您的浏览器不支持HTML5画布标记。window.onload=draw；function draw（）{var canvas=document.getElementById（'myCanvas'）；var c=canvas.getContext（'2d'）；var c1=20；var r1=20；c.fillStyle=“orange”；c.fillStyle=“black”；c.fillRect（c1，r1，150，100）；//等待3秒钟，然后加载黄色框setInterval（function（）{}，3000）；c.fillStyle=“yellow”；c.fillRect（c1，r1，150，100）；尝试了这一点，但没有太大帮助：var displayRects=true；setTimeout（function（）{displayRects=true}，3000）window.onload=draw；function draw（）{if（displayRects）{var canvas=document.getElementById（'myCanvas'）；var c=canvas.getContext（'2d'）；var interV；var c1=20；var r1=20；c.fillStyle=“black”；c.fillRect（c1，r11500）；//c.stroke（）；//等待3秒钟，然后加载黄色框c.fillStyle=“yellow”；c.fillRect（c1+50，r1+50150100）；}谢谢你，它确实把我带向了正确的方向。现在，在试图理解这一点并在调试模式下运行它时，我似乎对其工作方式的处理逻辑不确定。你能告诉我程序的控制流在setTimeout（function（）{displayRects=true}，3000）下是如何工作的吗？您好，再次尝试了这个，问题是我看到的只是出现了蓝色：var canvas=document.getElementById（“canvas”）；canvas.width=640；canvas.height=480；var ctx=canvas.getContext（“2d”）；var displayRects=false；draw（）；displayRects=true；var pass=1；//while（pass<3）{（color（pass）；draw（）；pass=pass+1；color（pass）；//）//setTimeout（function（）{displayRects=true}，3000）；function draw（）{ctx.fillStyle=“black”；ctx.fillRect（0,060480）；}function color（pass）{if（displayRects&&pass==1）{ctx.fillStyle=“yellow”；ctx.fillRect（100100,50,50）；}setTimeout（draw，3000）；if（displayRects&&pass==2）{ctx.fillStyle=“blue”；ctx.fillRect（150150,50,50）；}setTimeout（draw，3000）；}