javascript - 使 Canvas 中的形状在 5 秒后出现

Question

我在 html canvas 元素中有 2 个圆圈，我是用 Javascript 绘制的。我想让第一个圆圈在 5 秒后出现。我想知道您是否需要使用 Javascript 执行此操作，如果需要，您将如何执行此操作？

引用代码:

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(30, 75, 20, 0,Math.PI*2);
ctx.stroke();
ctx.closePath;
ctx.beginPath();
ctx.arc(100,75,20,0,Math.PI*2);
ctx.stroke();
ctx.closePath();

#canvas1{
  width: 300px;
  height: 150px;
  border: 1px solid black;
  margin-top: 100px;
}

<canvas id="canvas1"></canvas>

Answer 1

创建形状时使用setTimeout方法

setTimeout(function() {
   ctx.beginPath();
   ctx.arc(30, 75, 20, 0,Math.PI*2);
   ctx.stroke();
   ctx.closePath;
   ctx.beginPath();
   ctx.arc(100,75,20,0,Math.PI*2);
   ctx.stroke();
   ctx.closePath();
},5000)