javascript - Javascript canvas简单光源

我正在用JavaScript Canvas 制作游戏。我正在绘制所有游戏元素，例如玩家，方块和线条，但我不希望您看到所有这些。而是希望整个屏幕都变黑，在某些有光源的地方使用。我不需要任何阴影，只需在屏幕上用径向渐变照亮一个圆圈即可。在绘制完所有其他内容之后，我可以通过添加透明渐变来实现一个光源的目标，如下所示:(想象红色矩形就是游戏中的所有东西)

//Drawing all the game elements
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 400, 300);

//adding the darkness and the lightsources
var grd = ctx.createRadialGradient(150, 100, 5, 150, 100, 100);
grd.addColorStop(0, "transparent");
grd.addColorStop(1, "black");
ctx.fillStyle = grd; ctx.fillRect(0, 0, 600, 400);

JSFiddle

但是如何使用多个光源来实现呢？显示的技术无效。

我曾经尝试使用Illuminated.js api，但是那太慢了，而且我不需要任何阴影和所有奇特的东西，只需要一个圆圈就可以看到游戏。

最佳答案

这是我的方法的一个示例-创建黑白蒙版并将其乘以基数:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Drawing all the game elements
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 400, 300);

//adding the darkness and the lightsources
function addlight(ctx, x, y) {
  var grd = ctx.createRadialGradient(x, y, 10, x, y, 150);
  grd.addColorStop(0, "white");
  grd.addColorStop(1, "transparent");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, 600, 400);
}

var buffer = document.createElement('canvas');
buffer.width = 600;
buffer.height = 400;
b_ctx = buffer.getContext('2d');
b_ctx.fillStyle = "black";
b_ctx.fillRect(0, 0, 600, 400);
addlight(b_ctx, 150, 100);
addlight(b_ctx, 350, 200);
addlight(b_ctx, 450, 250);

ctx.globalCompositeOperation = "multiply";
ctx.drawImage(buffer, 0, 0);

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">