如何为画布手电筒效果添加颜色？[关闭]-解网

问：

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

10天前关闭。

改进此问题

我想知道是否有任何方法可以在 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>

javascript html css html5-canvas

画一个手电筒FX

使用彩色手电筒进行闪光灯特效的多种方法之一是使用径向渐变。

然后使用一种或多种加法合成模式将该渐变绘制在图像上。（例如，我使用和"color-dodge""lighter")

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

例

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

加载图像后（必须！WAIT FOR IMAGE TO LOAD）将画布大小设置为与图像匹配，并将函数设置为绘制 FX。draw

我不知道你想添加多少颜色或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>

上一个：如何在画布上获取具有特定 x，y 位置的特定图像？[关闭]

下一个：创建用于语言识别的算法

如何为画布手电筒效果添加颜色？[关闭]

How to add color to canvas flashlight effect? [closed]

评论

画一个手电筒FX

例