我想在我正在制作的游戏的背景上放置多个光源，使用一个光源效果很好，如下所示:

这是通过将 .png 图像放在其他所有东西之上来实现的，它变得更加透明，像这样:

适用于一个光源，但我需要另一种方法，我可以添加更多光源并四处移动光源。

我考虑过为每一帧逐个像素绘制一个类似的“阴影层”，并根据到每个光源的距离计算透明度。但是，这可能会很慢，我相信有更好的方法来解决这个问题。

图像只是示例，每一帧将有相当多的内容可以使用 requestAnimationFrame 移动和更新。

是否有一种轻量级且简单的方法来实现这一目标？提前致谢!

编辑

在 ViliusL 的帮助下，我想出了这个掩蔽解决方案:

http://jsfiddle.net/CuC5w/1/

// Create canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);

// Draw background
var img=document.getElementById("cat");
ctx.drawImage(img,0,0);

// Create shadow canvas
var shadowCanvas = document.createElement('canvas');
var shadowCtx = shadowCanvas.getContext('2d');
shadowCanvas.width = canvas.width;
shadowCanvas.height = canvas.height;
document.body.appendChild(shadowCanvas);

// Make it black
shadowCtx.fillStyle= '#000';
shadowCtx.fillRect(0,0,canvas.width,canvas.height);

// Turn canvas into mask
shadowCtx.globalCompositeOperation = "destination-out";

// RadialGradient as light source #1
gradient = shadowCtx.createRadialGradient(80, 150, 0, 80, 150, 50);
gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(1, "rgba(255, 255, 255, .1)");
shadowCtx.fillStyle = gradient;
shadowCtx.fillRect(0, 0, canvas.width, canvas.height);

// RadialGradient as light source #2
gradient = shadowCtx.createRadialGradient(220, 150, 0, 220, 150, 50);
gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(1, "rgba(255, 255, 255, .1)");
shadowCtx.fillStyle = gradient;
shadowCtx.fillRect(0, 0, canvas.width, canvas.height);

最佳答案

另一种使用光的方法是使用 globalCompositeOperation 模式“ligther”来照亮事物，而只使用 globalAlpha 来使事物变暗。

首先这是一张图片，左边是卡通闪电，右边是更逼真的闪电，但你更愿意看 fiddle ，因为它是动画的:
http://jsfiddle.net/gamealchemist/ABfVj/

那么我是怎么做的:

变暗:
- 选择一种变暗的颜色(最有可能是黑色，但您可以选择红色或其他颜色来调整结果)。
- 选择一个不透明度(0.3 似乎是一个不错的起始值)。
- fillRect 您想变暗的区域。

function darken(x, y, w, h, darkenColor, amount) {
    ctx.fillStyle = darkenColor;
    ctx.globalAlpha = amount;
    ctx.fillRect(x, y, w, h);
    ctx.globalAlpha = 1;
}

减轻:
- 选择一种亮色。请注意，此颜色的 r,g,b 将添加到前一个点的 r,g,b 中:如果您使用高值，您的颜色会被烧焦。
- 将 globalCompositeOperation 更改为“更轻”
- 您也可以更改不透明度，以更好地控制闪电。
- fillRect 或 arc 您想要变亮的区域。

如果在打火机模式下画几个圆，结果会相加，所以你可以选择一个很低的值画几个圆。

function ligthen(x, y, radius, color) {
    ctx.save();
    var rnd = 0.03 * Math.sin(1.1 * Date.now() / 1000);
    radius = radius * (1 + rnd);
    ctx.globalCompositeOperation = 'lighter';
    ctx.fillStyle = '#0B0B00';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * π);
    ctx.fill();
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, radius * 0.90+rnd, 0, 2 * π);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x, y, radius * 0.4+rnd, 0, 2 * π);
    ctx.fill();
    ctx.restore();
}

请注意，我添加了正弦变化以使光线更加生动。

点亮:另一种方式:
您还可以在仍然使用“更亮”模式的同时，使用渐变来获得更平滑的效果(第一个更像卡通，除非您画了很多圆圈。)。

function ligthenGradient(x, y, radius) {
    ctx.save();
    ctx.globalCompositeOperation = 'lighter';
    var rnd = 0.05 * Math.sin(1.1 * Date.now() / 1000);
    radius = radius * (1 + rnd);
    var radialGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
    radialGradient.addColorStop(0.0, '#BB9');
    radialGradient.addColorStop(0.2 + rnd, '#AA8');
    radialGradient.addColorStop(0.7 + rnd, '#330');
    radialGradient.addColorStop(0.90, '#110');
    radialGradient.addColorStop(1, '#000');
    ctx.fillStyle = radialGradient;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * π);
    ctx.fill();
    ctx.restore();
}

我还在这里添加了一个 sin 变体。
Rq:在每次绘制时创建渐变会产生垃圾:如果您使用单个渐变，请存储渐变，如果您想要为渐变设置动画，则将它们存储在数组中。
如果您在多个地方使用相同的光，请构建一个以 (0,0) 为中心的单一渐变，并在始终使用此单一渐变绘制之前平移 Canvas 。

Rq 2 :您可以使用裁剪来防止屏幕的某些部分变亮(如果有障碍物)。 我在我的例子中添加了蓝色圆圈来展示这一点。

因此，您可能希望使用这些效果直接照亮您的场景，或者单独创建一个光层，在将其绘制到屏幕上之前，您可以根据需要将其变暗/变亮。

这里讨论的场景太多了(灯光动画与否，裁剪与否，预计算灯光层与否，......)但就速度而言，对于 Safari 和 iOS safari，使用矩形/圆弧绘制的解决方案 - 无论是渐变还是实心填充 - 都比绘制图像/ Canvas 快得多。
在 Chrome 上，情况恰恰相反:当几何数增加时，绘制图像比绘制每个几何体更快。
Firefox 在这方面与 Chrome 非常相似。

关于javascript - Canvas 上的多个光源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19787235/