Javascript画布简单光源答案

【问题标题】：Javascript canvas simple lightsourceJavascript画布简单光源
【发布时间】：2014-12-23 16:20:15
【问题描述】：

我正在使用 javascript 画布制作游戏。我正在绘制所有的游戏元素，比如玩家、积木和线条，但我不想让你看到所有这些。而是希望整个屏幕是黑色的，期望在一些有光源的地方。我不需要任何阴影，只需要屏幕上的一个以径向渐变点亮的圆圈。在我绘制完其他所有内容之后，我可以通过添加一个透明渐变来为一个光源实现这一点，如下所示：（想象红色矩形是游戏中的所有东西）

//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，但速度非常慢，而且我不需要任何阴影和所有花哨的东西，只需要一个可以看到游戏的圆圈。

【问题讨论】：

我对画布没有经验，但理论上：在单独的上下文（缓冲区、图像、画布）中将灯光绘制为黑色背景上的 white->transparent 渐变?)，然后使用多重混合模式将其绘制到您的场景中。
这可能行得通，我会研究一下。
你可能想检查gamedev.stackexchange.com，他们可能有适合你的东西。

标签： javascript canvas radial-gradients

【解决方案1】：

这是我的方法的一个示例 - 创建黑白蒙版并与它相乘：

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);

&lt;canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"&gt;

【讨论】：