如何使画布上的圆圈在一定时间后消失？

Question

I created a canvas with about 15 circles that all appear after a certain amount of time one after eachother, using setTimeout in Javascript. I want to make the last circle that appears to then disappear and then all the other circles follow after it. How would I do this? Thank you for any help.

HTML:

<canvas id="canvas1" width=1500 height=300></canvas>

CSS:

#canvas1{
width: 1500px;
height: 300px;
margin:0 auto;
display: block;
}

Javascript:

var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
function circle(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="yellow";
ctx.fill();
}
function circle2(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="orange";
ctx.fill();
}
function circle3(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="pink";
ctx.fill();
}
function circle4(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="red";
ctx.fill();
}
function circle5(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="purple";
ctx.fill();
}
function circle6(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="#33FFD7";
ctx.fill();
}
function circle7(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="#653916";
ctx.fill();
}
function circle8(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="black";
ctx.fill();
}
function circle9(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="#653916";
ctx.fill();
}
function circle10(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="#33FFD7";
ctx.fill();
}
function circle11(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="purple";
ctx.fill();
}
function circle12(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="red";
ctx.fill();
}
function circle13(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="pink";
ctx.fill();
}
function circle14(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="orange";
ctx.fill();
}
function circle15(a1, a2, a3, a4) {
ctx.beginPath();
ctx.arc(a1, a2, a3, 0,Math.PI*2);
ctx.fillStyle="yellow";
ctx.fill();
}
setTimeout(circle, 2000 /*time in ms*/, 45, 150, 20, 0);
setTimeout(circle2, 2500, 100, 150, 25, 0);
setTimeout(circle3, 3000, 165, 150, 30, 0);
setTimeout(circle4 , 3500, 245, 150, 40, 0);
setTimeout(circle5, 4000, 340, 150, 45, 0);
setTimeout(circle6, 4500, 445, 150, 50, 0);
setTimeout(circle7,5000, 565, 150, 55, 0);
setTimeout(circle8, 5500, 700, 150, 65, 0);
setTimeout(circle9, 6000, 835, 150, 55, 0);
setTimeout(circle10, 6500, 955, 150, 50, 0);
setTimeout(circle11, 7000, 1065,150,45,0);
setTimeout(circle12,7500, 1160,150,40,0);
setTimeout(circle13, 8000, 1240,150,30,0);
setTimeout(circle14, 8500, 1305,150,25,0);
setTimeout(circle15, 9000, 1360,150,20,0);

Answer 1

Canvas doesn't work with shape objects, it just renders pixels to the canvas. To erase those circles, you'd have to either:

1. Redraw the same circle with the background color (if it doesn't overlap with anything else and you didn't use anti-aliasing and probably other caveats), or

2. Erase the canvas and redraw it without drawing that circle

If you want to use a graphics system based on shape objects, use SVG instead.