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

Question

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

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

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, 0, canvas.width, canvas. height);

}

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

function animate() {

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

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

    game.darkness_effect(); // !

    player.glow(); // !

    requestAnimationFrame(animate);

}

我怎样才能解决这个问题？我只想要玩家位置周围的圆形发光，而不是整个屏幕都是深橙色。

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

标签： javascriptcanvasalphaglow

Answer 1

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