P5.js 在透明背景上绘图

Question

我试图在每次单击鼠标时绘制一些气泡，我希望我的 canvas 是透明的，这样它只能显示气泡而不会覆盖网站上的其他元素。

问题是气泡似乎并没有移动，因为它们中的每一个都只是修剪一点并再画一次，而没有去除最后一个。

如何让每个气泡在移动并绘制到别处后消失（变成透明）？

在这里你可以看到问题：

picture

哦，这是代码：

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 在透明背景上绘图

P5.js drawing on a transparent background

javascript

canvas

p5.js