Question

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

Answer 1

以下是我的方法示例 - 创建黑色和白色蒙版并将基础与其相乘：

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript画布简单的lightsource

1 个答案: