[英]make a shape in canvas appear after 5s
I have 2 circles in the html canvas element, which I drew with Javascript. 我用JavaScript绘制的html canvas元素中有2个圆圈。 I want to make the first circle appear after 5 seconds. 我想让5秒后出现第一个圆圈。 I was wondering if you need to do this with Javascript and if so, how do you do this? 我想知道您是否需要使用Javascript,如果需要,该如何执行?
See the code for reference: 请参阅代码以供参考:
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>
use setTimeout method when the shape is created 创建形状时使用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)
You can use global function setTimeout , eg like this: 您可以使用全局函数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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.