如何为画布添加颜色手电筒效果？

Question

我想知道是否有任何方法可以在 JavaScript 中为我的手电筒添加颜色效果，这样它看起来有点像我的图像上的光。我似乎不知道如何实现我想要的效果。我尝试在 CSS、JavaScript 和 HTML 中添加所有代码，但到目前为止我只有鼠标悬停圆圈的效果。我不确定是否可以在手电筒效果上添加使颜色发生的效果，但任何帮助将不胜感激。

片段 - 这是我的 JavaScript

document.addEventListener("DOMContentLoaded", function() {

  const canvas = document.getElementById("flashlight-canvas");
  const ctx = canvas.getContext("2d");
  const image = document.getElementById("darkimage");

  canvas.width = image.width;
  canvas.height = image.height;

  let radius = 150;
  let mouseX, mouseY;

  function drawFlashlight() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "source-over";
    ctx.drawImage(image, 0, 0);
    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, radius, 0, 2 * Math.PI);
    ctx.fill();
  }

  canvas.addEventListener("mousemove", function(e) {
    mouseX = e.clientX - canvas.getBoundingClientRect().left;
    mouseY = e.clientY - canvas.getBoundingClientRect().top;
    drawFlashlight();
  });

  drawFlashlight()
  
});

#flashlight-canvas {
  position: absolute;
  z-index: 1;
  width: 1000px
}

#darkimage {
  position: absolute;
  z-index: 0;
  width: 1000px
}

<div class="container" id="week5">
  <h2>Week 5</h2>
  <p>Canvas</p>
  <div class="container5">
    <canvas id="flashlight-canvas"></canvas>
    <img src="https://3.api.artsmia.org/800/109833.jpg" id="darkimage" alt="Dark Image">
  </div>
</div>

Answer 1

你的代码有问题，我没有费心找出什么问题，只是重写了。

画一个手电筒FX

使用颜色进行闪光灯 FX 的一种（多种）方法是使用 径向渐变。

然后使用一种或多种附加合成模式在图像上绘制渐变以进行光照。 （在示例中我使用

"color-dodge"

和“打火机”）

您可以使用全局 Alpha 来混合合成模式的强度，并将径向渐变色标设置为灯光的颜色。

示例

示例加载图像并为灯光创建渐变。注意图像仅在代码中，而不是 HTML 形式的页面上

图像加载后（必须！等待图像加载），画布大小设置为与图像匹配，并且

draw

功能设置为绘制 FX。

我不知道你想添加多少颜色或FX强度，所以我只使用一点红色和黄色并以中等构图模式混合

const ctx = canvas.getContext("2d");
var draw = () => {}; // does nothing until image has loaded

// create image 
const image = new Image;
image.src = "https://3.api.artsmia.org/800/109833.jpg";
image.addEventListener("load", () => {
  draw = drawFlashlight;
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  draw();
}, {once: true});

var radius = 150, mouseX = 0, mouseY = 0;

// create gradient for light
const lightGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
lightGrad.addColorStop(0.0, "#705545");
lightGrad.addColorStop(0.2, "#765");
lightGrad.addColorStop(0.4, "#706555");
lightGrad.addColorStop(0.92, "#504433");
lightGrad.addColorStop(0.97, "#100800");
lightGrad.addColorStop(1.0, "#000");

function drawImage(image) {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.globalCompositeOperation = "source-over";
  ctx.drawImage(image, 0, 0);
}

function drawFlashlight() {
  ctx.globalAlpha = 1;
  drawImage(image);
  ctx.setTransform(1, 0, 0, 1, mouseX, mouseY);
  ctx.fillStyle = lightGrad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.globalAlpha = 0.7;
  ctx.globalCompositeOperation = "color-dodge";
  ctx.fill();
  ctx.globalAlpha = 0.3;
  ctx.globalCompositeOperation = "lighter";
  ctx.fill();
}

canvas.addEventListener("mousemove", function(e) {
  mouseX = e.clientX - canvas.getBoundingClientRect().left;
  mouseY = e.clientY - canvas.getBoundingClientRect().top;
  draw();
});

<canvas id="canvas"></canvas>