Question

我使用Javascript中的setTimeout，创建了一个包含约15个圆圈的画布，这些画布在经过一定时间后都相继出现。我要使最后一个似乎消失的圆圈消失，然后所有其他圆圈跟随它。我该怎么做？谢谢您的帮助。

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

画布不适用于形状对象，它仅将像素渲染到画布。要删除这些圆圈，您必须：

使用背景色重绘相同的圆（如果它不与其他任何东西重叠并且您没有使用抗锯齿功能，也可能没有其他警告），或者
擦除画布并重新绘制而不绘制该圆圈

如果要使用基于形状对象的图形系统，请改用SVG。

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

1 个答案: