Question

我试图在每次点击鼠标时画一些气泡，我希望我的画布是透明的，所以它只能显示气泡而不会覆盖网站上的其他元素。

问题在于气泡似乎没有移动，因为它们中的每一个都只是修剪一下并再次吸引自己而不去掉最后一个。

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

在这里你可以看到问题：

哦，这里是代码：

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);
    }
}

Answer 1

听起来你只是在寻找clear()功能。

可以在the reference找到更多信息。

// Clear the screen on mouse press.
function setup() {
  createCanvas(100, 100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

function mousePressed() {
  clear();
}

在您的情况下，您可能希望将clear()作为每个draw()框架中的第一行。

P5.js在透明背景上绘图

1 个答案: