javascript - 如何解决HTML5 canvas globalAlpha问题？

我目前正在尝试为游戏的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);

我在哪里弄糟或需要添加一些东西？

最佳答案

您需要包装在.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()

关于javascript - 如何解决HTML5 canvas globalAlpha问题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59940826/