我尝试在每次鼠标单击时绘制几个气泡，并且我希望画布是透明的，这样它只能显示气泡而不会覆盖网站上的其他元素。

问题是气泡似乎没有移动，因为每个气泡都只是割草一点，然后再次绘制自己而不删除最后一个。

如何使每个气泡在移动并在其他地方绘制后消失（变得透明）？

您可以在这里看到问题：

图片

哦，这是代码：

var springs = [];

var Bubble = function(position) {

    this.position = position.copy();
    this.radius = random(10, 22);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = random(1, 1.05);
    this.expire = random(30, 150);
};

Bubble.prototype.Move = function(){

    this.velocity = createVector(random(this.velocity.x-0.07,this.velocity.x+0.07), random(this.velocity.y-0.07,this.velocity.y+0.07));

    var wind;
    if(mouseX > windowWidth/2){
        wind = (windowWidth/2 + (mouseX - windowWidth/2))/10000.0 + 0.005;
    }else{
        wind = -1*((windowWidth/2 + (mouseX - windowWidth/2))/10000.0 + 0.005);
    }

    this.velocity.add(wind);

    this.position.add(this.velocity.mult(this.acceleration));

    this.expire -= 2;

    stroke(198, 151, 204, this.expire);
    strokeWeight(1);
    fill(255, 0);
    ellipse(this.position.x, this.position.y, this.radius, this.radius);

};

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {

    for(var i = 0; i < springs.length; ++i){
        var bubble = springs[i];
        if(bubble.expire > 0){
            bubble.Move();
        }else{
            springs.splice(i, 1);
        }
    }

    if (mouseIsPressed) {
        let bubble = new Bubble(createVector(mouseX, mouseY));
        springs.push(bubble);
    }
}