如何更改 canvas 上呈现的单个对象的不透明度？

Question

我有这些粒子，它们是 canvas 上呈现的列表中的对象。现在它们会填充屏幕，如果列表有超过一百个条目，那么我会删除前两个。我的问题是我想在创建时逐渐增加不透明度并在删除对象之前逐渐减少它。最好的方法是什么？这是我的 js:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var dots = new Array();

function createDot(xStart, yStart, radius, movementX, movementY){
    this.xStart = (typeof xStart !== 'undefined') ? xStart : Math.floor(Math.random() * c.width);
    this.yStart = (typeof yStart !== 'undefined') ? yStart : Math.floor(Math.random() * c.height);
    this.movementX = (typeof movementX !== 'undefined') ? movementX : Math.floor(Math.random() * 50-25)/50;
    this.movementY = (typeof movementY !== 'undefined') ? movementY : Math.floor(Math.random() * 50-25)/50;
    this.radius = (typeof radius !== 'undefined') ? radius : Math.floor(Math.random() * 20);
    ctx.beginPath();
    ctx.arc(xStart,yStart,radius, 0,2*Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'white';
    ctx.fill();
    ctx.stroke();
}
function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    dots.push(new createDot());
    for(i=0;i<dots.length;i++){
        let d = dots[i];
        
        ctx.beginPath();
        ctx.arc(d.xStart+=d.movementX, d.yStart+=d.movementY,d.radius, 0,2*Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.strokeStyle = 'white';
        ctx.stroke();  
    }

    if(dots.length>100){
        dots.splice(0,2);
    }
    
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

canvas {
  background: black
}

<canvas id=canvas></canvas>

Answer 1

是这样的吗？

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var dots = new Array();

function createDot(xStart, yStart, radius, movementX, movementY){
    this.xStart = Math.floor(Math.random() * c.width);
    this.yStart = Math.floor(Math.random() * c.height);
    this.movementX = Math.floor(Math.random() * 50-25)/50;
    this.movementY = Math.floor(Math.random() * 50-25)/50;
    this.radius =  Math.floor(Math.random() * 20);
    this.opacity = 0
}

function animate(t){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    dots.push(new createDot());
    for(i=0;i<dots.length;i++){
        let d = dots[i];
        ctx.beginPath();
        ctx.arc(d.xStart+=d.movementX, d.yStart+=d.movementY,d.radius, 0,2*Math.PI,0);
        let a = dots.length>99 && i<20 ? 1-(20-i)*0.05 : Math.min(1, d.opacity+=0.05);
        ctx.fillStyle = `rgba(255,255,255,${a})`;
        ctx.fill();
    }
 
    if(dots.length>100){
        dots.splice(0,2);
    }
    
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

canvas {
  background:black
}

<canvas id=canvas ></canvas>

如何更改 canvas 上呈现的单个对象的不透明度？

How do I change opacity of individual object rendered on canvas?

javascript

canvas

particles

html5-canvas

web