如何为Canvas手电筒效果添加彩色光照-js教程-PHP中文网

如何为Canvas手电筒效果添加彩色光照

本文介绍如何使用canvas的径向渐变与混合模式（如color-dodge、lighter）实现带颜色的手电筒光照效果，替代纯黑底挖洞式遮罩，使光照呈现自然色温与辉光。

本文介绍如何使用canvas的径向渐变与混合模式（如color-dodge、lighter）实现带颜色的手电筒光照效果，替代纯黑底挖洞式遮罩，使光照呈现自然色温与辉光。

在原实现中，手电筒效果依赖 destination-out 复合操作——即在图像上“挖空”一个圆形区域，露出背景（通常是黑色），本质上是去色遮罩，无法体现光照本身的色彩属性。若想模拟真实光源（如暖黄灯、冷白光或霓虹灯效），需转向叠加式着色光照：先绘制原始图像，再以彩色径向渐变覆盖指定区域，并通过高级混合模式增强亮度与色彩渗透感。

✅ 核心技术要点

径向渐变（createRadialGradient）：定义从中心到边缘的颜色过渡，模拟光强衰减；
混合模式（globalCompositeOperation）：
- "color-dodge"：提亮并保留色调，适合主光效；
- "lighter"：简单叠加亮度，增强辉光层次；
动态坐标变换（setTransform）：将渐变原点锚定于鼠标位置，避免每次重绘渐变对象；
图像加载保障：必须等待 Image.onload 后再设置 canvas 尺寸与启动渲染，否则 naturalWidth/Height 为 0，导致渲染异常。

? 完整可运行示例

<canvas id="canvas" width="800" height="600"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();

// 使用更富表现力的暖色渐变（可按需调整为蓝、紫、橙等）
const lightGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, 150);
lightGrad.addColorStop(0.0, "#ffeedd");   // 中心：柔和米白
lightGrad.addColorStop(0.3, "#ffcc88");   // 中段：暖橙
lightGrad.addColorStop(0.7, "#aa7733");   // 边缘：深棕过渡
lightGrad.addColorStop(1.0, "rgba(0,0,0,0)"); // 完全透明，自然消散

let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;
let radius = 150;

image.src = "https://3.api.artsmia.org/800/109833.jpg";
image.onload = () => {
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  draw(); // 首帧渲染
};

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

function draw() {
  drawImage();

  // 关键：将画布原点平移到鼠标位置，使渐变中心对齐光斑
  ctx.setTransform(1, 0, 0, 1, mouseX, mouseY);
  ctx.fillStyle = lightGrad;

  // 主光效：color-dodge 增强明暗对比与色彩饱和度
  ctx.globalAlpha = 0.8;
  ctx.globalCompositeOperation = "color-dodge";
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, Math.PI * 2);
  ctx.fill();

  // 辅助辉光：lighter 叠加柔光层，提升立体感
  ctx.globalAlpha = 0.3;
  ctx.globalCompositeOperation = "lighter";
  ctx.beginPath();
  ctx.arc(0, 0, radius * 1.4, 0, Math.PI * 2);
  ctx.fill();
}

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

// 可选：支持触摸设备
canvas.addEventListener("touchmove", (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const rect = canvas.getBoundingClientRect();
  mouseX = touch.clientX - rect.left;
  mouseY = touch.clientY - rect.top;
  draw();
});