如何实现鼠标跟随的圆形柔边图片局部饱和效果？

需求概述 #

• 鼠标移动时，光标位置的图片区域呈现饱和色彩，离开的区域恢复灰度
• 效果为圆形，边缘需柔和过渡，无生硬边界
• 尝试使用CSS saturate()滤镜未达到预期效果

问题修复与实现方案 #

你的代码核心思路可行，但存在两处关键问题：一是图片加载事件绑定错误，二是直接用saturation混合模式无法实现柔边效果。以下是修正后的完整实现：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        canvas { cursor: crosshair; }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        const size = 250;
        const radius = 80;
        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = size;
        canvas.height = size;

        const image = new Image();
        image.src = "https://picsum.photos/250";
        image.onload = init;

        function init() {
            // 绘制灰度底图
            ctx.filter = "grayscale(100%)";
            ctx.drawImage(image, 0, 0);
            ctx.filter = "none";

            canvas.addEventListener('mousemove', ev => {
                drawSaturationArea(ev.offsetX, ev.offsetY);
            });
        }

        function drawSaturationArea(x, y) {
            // 重置画布，重新绘制灰度底图
            ctx.clearRect(0, 0, size, size);
            ctx.filter = "grayscale(100%)";
            ctx.drawImage(image, 0, 0);
            ctx.filter = "none";

            // 创建径向渐变遮罩：中心不透明，边缘透明过渡
            const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
            gradient.addColorStop(0, "rgba(255,255,255,1)");
            gradient.addColorStop(0.7, "rgba(255,255,255,0.5)");
            gradient.addColorStop(1, "rgba(255,255,255,0)");

            // 绘制饱和区域
            ctx.save();
            ctx.globalCompositeOperation = "source-atop";
            ctx.fillStyle = gradient;
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.drawImage(image, 0, 0);
            ctx.restore();
        }
    </script>
</body>
</html>

核心改进说明 #

1. 修复图片加载逻辑：调整onload绑定顺序，确保图片加载完成后执行初始化代码
2. 分层实现灰度与饱和：先绘制全灰度底图，再在上方叠加原图的圆形区域，通过混合模式实现局部饱和
3. 柔边效果实现：使用径向渐变创建从中心到边缘透明过渡的遮罩，让圆形边缘自然柔和，避免生硬切割

内容的提问来源于stack exchange，提问作者Cbiscuit