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)

Answer 2

您可以使用全局函数setTimeout，例如像这样：

var c = document.getElementById("canvas1")
var ctx = c.getContext("2d")

function circle(a1, a2, a3, a4) {
  ctx.beginPath()
  ctx.arc(a1, a2, a3, a4 ,Math.PI*2)
  ctx.stroke()
  ctx.closePath()
}

setTimeout(circle, 5000 /*time in ms*/, 30, 75, 20, 0)
circle(100, 75, 20, 0)

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

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

使画布上的形状在5秒后出现

2 个答案: