javascript - 如何修复 HTML5 canvas globalAlpha 问题？

Question

我目前正在尝试为游戏的 HTML5 Canvas 创建一个粒子系统，我需要让粒子随着时间的推移逐渐淡出。我不想局限于 rgba()，所以我尝试使用 ctx.globalAlpha = alpha。使它淡出的代码有效，但我无法删除最后一个圆圈，它们也淡出，并创建了一条线。

这是JS代码:

class Particle{
   //Non important declarations
    display(ctx){
        this.a = this.a < 0 ? 0 : this.a;
        ctx.globalAlpha = 1;
        ctx.globalAlpha = this.a;

        ctx.fillStyle=this.color;
        ctx.arc(this.x, this.y, this.rad, 0, Math.PI*2, false);
        ctx.fill();


    }

}

let P=new Particle(200, 200, 20, 180, 270, 5, 0.01, "blue");
const can= document.getElementById("canvas");
const c= can.getContext("2d");
can.height=innerHeight;
can.width=innerWidth;
clear=function(col){
    c.globalAlpha=1;
    c.fillStyle=col;
    c.fillRect(0,0,innerWidth,innerHeight);
}
window.setInterval(function (){
    clear("white");
    P.update();
    P.display(c);

我哪里搞砸了或需要添加一些东西？

Answer 1

您需要将绘制粒子的代码包装在 .save() 和 .restore() 中

ctx.save();
this.a = this.a < 0 ? 0 : this.a;
ctx.globalAlpha = this.a;

ctx.fillStyle=this.color;
ctx.arc(this.x, this.y, this.rad, 0, Math.PI*2, false);
ctx.fill();
ctx.restore();

这样，对全局属性(globalAlpha、fillStyle...)所做的更改将不会影响其他粒子。

更新

我没有理解这个问题。您正在绘制一个粒子，但是因为您没有调用 .beginPath() ，所以对 .arc() 的调用会累积，并且在每次更新时都会重新绘制所有先前的弧线

您必须在绘制每个圆之前调用 .beginPath():

display(ctx){
    ctx.save();
    this.a = this.a < 0 ? 0 : this.a;
    ctx.globalAlpha = this.a;
    ctx.fillStyle=this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.rad, 0, Math.PI*2, false);
    ctx.fill();
    ctx.restore();
}

注意:如果您计划添加更多粒子，您仍然需要使用 .save()/.restore()