Javascript 在画布上绘制灯光

嗨，我正试图在画布上绘制灯光，如下所示：

<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);

ctx.clearRect(0,0,300,300);

var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);

ctx.clearRect(300,0,600,300);

var grd = ctx.createRadialGradient(450,150,0,450,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(300,0,600,300);

</script>

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“rgba（0,0,0,0.75）”；
ctx.fillRect（0,0300）；
ctx.clearRect（0,0300）；
var grd=ctx.createRadialGradient（150150,0150150）；
grd.addColorStop（0，“rgba（255255,0,0）”）；
grd.addColorStop（1，“rgba（0,0,0,0.75）”）；
ctx.fillStyle=grd；
ctx.fillRect（0,0300）；
ctx.clearRect（300,0600300）；
var grd=ctx.createRadialGradient（450150,0450150）；
grd.addColorStop（0，“rgba（255255,0,0）”）；
grd.addColorStop（1，“rgba（0,0,0,0.75）”）；
ctx.fillStyle=grd；
ctx.fillRect（300,0600300）；

问题是当灯光重叠时

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);

ctx.clearRect(0,0,300,300);

var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);

ctx.clearRect(200,0,500,300);

var grd = ctx.createRadialGradient(350,150,0,350,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(200,0,500,300);

</script>

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“rgba（0,0,0,0.75）”；
ctx.fillRect（0,0300）；
ctx.clearRect（0,0300）；
var grd=ctx.createRadialGradient（150150,0150150）；
grd.addColorStop（0，“rgba（255255,0,0）”）；
grd.addColorStop（1，“rgba（0,0,0,0.75）”）；
ctx.fillStyle=grd；
ctx.fillRect（0,0300）；
ctx.clearRect（200,050300）；
var grd=ctx.createRadialGradient（350150,0350150）；
grd.addColorStop（0，“rgba（255255,0,0）”）；
grd.addColorStop（1，“rgba（0,0,0,0.75）”）；
ctx.fillStyle=grd；
ctx.fillRect（200,050300）；

我需要灯光集中在一起，不要重叠 我还需要看到画布下方的图像 我怎样才能解决这个问题

我用了两张画布，一张画风景，一张画灯光

这几乎就是我要寻找的，但它仍然有点'黑暗的地方，灯光重叠，有太少的光线在每个灯光的中心，它看起来像一个白光，而不是黄光

---

谢谢

如果你真的想重叠这两个渐变，我建议你做几件事

• 摆脱

  clearRect（）

• 改变

  grd.addColorStop（0，“rgba（255255,0,0）”；grd.addColorStop（1，“rgba（0,0,0,0.75）”）；
  

  这样，第二个颜色停止点的alpha分量为0，这样，渐变实际上会在朝向圆边缘时淡出。实际上，只有当圆在接近终点时才可以重叠
• 不要使用

  fillRect（）

  ，而是使用圆弧

---

见。我没有保留颜色，但它应该会让您了解如何继续。

添加到@nisargjhaveri的答案设置

ctx.globalCompositeOperation=“lighter”

会产生很好的效果

功能牵引地面（）{
var can=document.getElementById（'background'）；
var ctx=can.getContext（'2d'）；
var grd=ctx.createLinearGradient（0,0,0,150）；
grd.addColorStop（0，“rgba（0255255,1）”）；
grd.addColorStop（1，“rgba（301002,1）”；
ctx.fillStyle=grd；
ctx.fillRect（0,0500150）；
var grd=ctx.createLinearGradient（0,150,0,300）；
grd.addColorStop（0，“rgba（15,75,25,1）”；
grd.addColorStop（1，“rgba（30150,50,1）”；
ctx.fillStyle=grd；
ctx.fillRect（0150500300）；
}
牵引杆接地（）；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var bg=document.getElementById（“背景”）；
var-x1=150；
变量y1=150；
var x2=350；
变量y2=150；
变量步骤1={
x:1，
y:1
};
var step2={
x:-1，
y:1
};
函数循环（）{
ctx.save（）；
ctx.fillStyle=“rgba（0,0,0,1）”；
ctx.clearRect（0,0,500,300）；
//为圆创建白色到透明的渐变
//圈一
var grd=ctx.createRadialGradient（x1，y1，0，x1，y1，150）；
grd.addColorStop（.75，“rgba（255255,0,1）”；
grd.addColorStop（1，“rgba（255255,0,0）”）；
ctx.beginPath（）；
ctx.fillStyle=grd；
ctx.弧（x1，y1，150，0，数学π*2，假）
ctx.fill（）；
//圈二
var grd=ctx.createRadialGradient（x2，y2，0，x2，y2，150）；
grd.addColorStop（.75，“rgba（255255,1）”；
grd.addColorStop（1，“rgba（255255,0）”）；
ctx.beginPath（）；
ctx.fillStyle=grd；
ctx.arc（x2，y2，150，0，Math.PI*2，false）
ctx.fill（）；
//用背景图像填充白色部分。
ctx.globalCompositeOperation=“source”；
ctx.drawImage（背景，0，0，背景宽度，背景高度）；
//用灰色填充透明部分。
ctx.globalCompositeOperation=“目的地”
ctx.fillStyle=“rgba（63,63,63,1）”；
ctx.fillRect（0，0，c.宽度，c.高度）；
//清除GlobalComposite操作
ctx.restore（）；
step1.x=x1>c.width？-1:x1<0？1:step1.x；
step1.y=y1>c.高度？-1:y1<0？1:step1.y；
step2.x=x2>c.width？-1:x2<0？1:step2.x；
step2.y=y2>c.height？-1:y2<0？1:step2.y；
x1+=步骤1.x；
y1+=步骤1.y；
x2+=步骤2.x；
y2+=步骤2.y；
设置超时（循环，1000/60）；
}
loop（）

jsiddle:

javascript

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

var image = new Image();
image.src = "http://images4.fanpop.com/image/photos/16000000/Beautiful-Cat-cats-16096437-1280-800.jpg";

image.onload = function () {
    ctx.drawImage(image, 0, 0, 500, 400);

    var grd = ctx.createRadialGradient(150, 150, 0, 0, 150, 200);
    grd.addColorStop(0, "rgba(255,255,0,1)");
    grd.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.arc(150, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();

    var grd = ctx.createRadialGradient(350, 150, 0, 350, 150, 200);
    grd.addColorStop(0, "rgba(255,255,0,1)");
    grd.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.arc(350, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();
};

---

如果您想让它们先间隔，不要清除画布，例如不使用

clearRect（）

。请注意，重叠区域较暗，因为项目相互重叠。另外，先设置背景色，然后将渐变移到透明位置如何？“我还需要看到画布下方的图像”-我不知道这会对问题产生什么影响。您只需在开始时在画布上绘制一幅图像，然后使用下面的解决方案中提到的完全相同的解决方案。谢谢，但不完全一样，请参见编辑中的图像。我很困惑？似乎有一个单一的画布，就像我提到的，在功能上适合你想要的。真的有必要有两个画布吗？我会将

ctx.globalCompositeOperation=“screen”

添加到您的示例中，这样可以使形状更好地交错。没问题@OP：请注意，您可以在这个示例中随意使用，以获得您想要的照明效果。好啊现在的问题是：我使用了clearRect（）和gradient，因为我需要看到画布下方的图像，这可能吗？@Miky我将输出更改为与您发布的JSFIDLE类似。黄色已丢失，因此您需要将其重新添加。谢谢，但在您的代码中，将覆盖图像而不是发现它[image][1][1]：