JavaScript:是否可以从矩形中切出一个形状以在其中制作一个透明的孔？

Question

我现在正在尝试用 Javascript 制作一个 2d 自上而下的游戏。我目前有一个日/夜系统，其中黑色矩形逐渐变得更加不透明(随着时间的推移)，然后最终完全不透明，模拟玩家看不到的夜晚高峰。

我想实现一个人造光系统，玩家可以使用手电筒照亮他们前面的一小块区域。然而，我的问题是我似乎无法找到一种方法从我的不透明矩形中“切出”形状。通过剪出一个形状，玩家看起来就像有一个火把。

请找到我在下面制作的示例模型图像来展示我的意思。 /image/OnBlJ.png 显然，形状不应该画得这么粗略:)

感谢您的宝贵时间， 凸轮

编辑:用于绘制矩形的代码如下:

context.fillStyle = "#000033";
    context.globalAlpha = checkLight(gameData.worldData.time);
    context.fillRect(0, 0, 512, 480);
    //This is where you have to add the cut out triangles for light!
    context.stroke();

Answer 1

当“灯”打开时，不要在场景上绘制一个矩形以使其变暗，而是绘制一个图像，其中“亮”区域完全透明，而其余“暗”区域更加不透明。