为什么我的发光效果没有按预期显示？

问题描述

我正在开发一款游戏，我试图在其中模拟玩家周围的火炬般的发光效果。为此，我首先绘制我的播放器，然后在我的画布上绘制一个半透明的叠加层。这种覆盖层给人一种黑暗的感觉，使屏幕变暗。但是，我也想让播放器周围的区域更亮，要么发光，要么去除画布特定区域的黑暗（在这种情况下，我的播放器的位置）。但是，当我尝试这样做时，我的整个画布都变成了我的发光颜色，效果并不理想。这是发生的事情：

此外，这是我用来创建发光效果的代码：

glow() {

    canv.shadowBlur = 75;
    canv.shadowColor = "orange";
    canv.globalAlpha = 0;
    canv.fillRect(this.x,this.y,this.width,this.height);

}

我的画布上的黑暗效果（请注意，这些是两个单独对象中的方法）：

darkness_effect() {
    
    canv.globalAlpha = 0.6;
    canv.shadowBlur = 0;
    canv.shadowColor = "black";
    canv.fillStyle = "black";
    canv.fillRect(0,canvas.width,canvas. height);

}

这是函数调用的顺序（其他函数可以忽略，它们对画布显示没有影响）：

function animate() {

    game.draw_background();
    game.tick_update();

    player.update();
    player.animate();

    game.darkness_effect(); // !

    player.glow(); // !

    requestAnimationFrame(animate);

}

我该如何解决这个问题？我只想要播放器位置周围的圆形发光，而不是整个屏幕都呈深橙色。

附言如果一切都失败了，我也愿意尝试不同的方法来达到我想要的结果。有没有人知道任何其他方法可以做到这一点？

解决方法

我似乎找到了解决方法。我继续使用我的黑暗效果，但也创建了一个新图像来模拟发光。它现在可以正常工作了。