使畫布上的形狀在5秒后出現

Question

我用JavaScript繪制的html canvas元素中有2個圓圈。 我想讓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>