【发布时间】：2021-07-20 02:46:42
【问题描述】：
我正在开发一款游戏，试图在玩家周围模拟火炬般的发光效果。为此，我首先绘制我的播放器，然后在我的画布上绘制一个半透明的叠加层。这种叠加给人一种黑暗的感觉，使屏幕变暗。但是，我还想使玩家周围的区域更亮，要么使用发光，要么通过消除画布特定区域（在本例中为玩家的位置）中的黑暗。但是，当我尝试这样做时，我的整个画布都变成了我的发光颜色，并且效果不如预期。这是发生了什么：
另外，这里是我用来创建发光效果的代码：
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);
}
我该如何解决这个问题？我只希望我的玩家位置周围有一个圆形发光，而不是整个屏幕都是深橙色。
附：如果一切都失败了，我也愿意尝试不同的方法来达到我想要的结果。有谁知道其他方法可以做到这一点？
【问题讨论】：
-
您是否在绘制不同元素之间清除样式？例如，如果在
darkness_effect()之前调用glow()，则canv.shadowColor和canv.shadowBlur将继续执行，因为它们之间从未更新过。 -
我刚刚尝试按照您的建议编辑我的代码，但问题仍然（有点）仍然存在。虽然发光有些明显，但它仍然被黑暗效果重叠。
-
很可能更多相同。您需要检查所有绘图功能并查看未更新的效果。 （它们也从头到尾延续。
glow()的更改将影响draw_background()。） -
您也可以尝试使用更亮的橙色或多次绘制光晕。
.shadowBlur本质上倾向于使颜色变暗。不利的一面是.shadowBlur是一个代价高昂的效果。 -
This might help you。使用渐变，或使用 globalCompositeOperation 在叠加层中创建一个洞。
标签： javascript canvas alpha glow