带有 HTML 画布的 2D 照明

如何解决带有 HTML 画布的 2D 照明

我正在重新制作需要照明的 2D 体素游戏泰拉瑞亚。

我想要的是输入一组光对象，包括 x y 位置、强度等，然后得到一个逐渐淡出的透明圆圈的 HTML 画布。这是我目前的实现：

const lights = [{
    x: 30,y: 30,color: "#f8f8f8",fade: 10,intensity: 5,},{
    x: 60,y: 40,{
    x: 65,y: 80,color: "#ffffff",fade: 12,intensity: 6,];

const ctx = canvas.getContext("2d");

const fadeMultiplier = 2;

ctx.fillStyle = "#000000";
ctx.globalAlpha = 0.8;
ctx.fillRect(0,canvas.width,canvas.height);

ctx.linewidth = 2;

ctx.globalAlpha = 1;
for (const light of lights) {
  ctx.strokeStyle = light.color;
  ctx.fillStyle = light.color;
  ctx.linewidth = fadeMultiplier * 2;

  const {
    fade,intensity
  } = light;

  for (let i = 0; i < fade; i++) {
    const circleWidth = intensity + (fade - i) * fadeMultiplier;
    if (circleWidth > 0) {
      ctx.globalAlpha = i / fade;

      ctx.beginPath();
      ctx.ellipse(light.x,light.y,circleWidth,2 * Math.PI);
      ctx.stroke();
    } else {
      continue;
    }
  }

  ctx.globalAlpha = 1;
  ctx.ellipse(light.x,intensity,2 * Math.PI);
  ctx.fill();
}

canvas {
  width: 300px;
  height: 300px;
}

<canvas id="canvas" width="100" height="100"></canvas>

首先绘制一个黑色矩形来填充画布。之后，为每个光对象绘制部分透明的圆，半径和透明度逐渐变小。

然后我将在画布上的所有内容上绘制它，从而产生灯光效果。问题是您在图像上看到的白色需要是透明的。现在它只是一个纯白色，会覆盖屏幕。

如何升级我当前的功能以创建我所描述的灯光效果？或者我应该尝试一种完全不同的方法？我的主要目标是性能，如果我能把它控制在 3 毫秒以下，我会很高兴。