js实现光圈

实现光圈效果的方法

在JavaScript中实现光圈效果可以通过Canvas或CSS结合动画完成。以下是两种常见的方法：

使用Canvas绘制动态光圈

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let radius = 0;
let growing = true;

function drawGlow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI * 2);

    // 创建渐变效果
    const gradient = ctx.createRadialGradient(
        canvas.width/2, canvas.height/2, 0,
        canvas.width/2, canvas.height/2, radius
    );
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    ctx.fillStyle = gradient;
    ctx.fill();

    // 控制光圈大小变化
    if (growing) {
        radius += 1;
        if (radius > 100) growing = false;
    } else {
        radius -= 1;
        if (radius < 10) growing = true;
    }

    requestAnimationFrame(drawGlow);
}

drawGlow();

使用CSS动画实现光圈效果

<div class="glow-effect"></div>

<style>
.glow-effect {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(0.8);
        opacity: 0.5;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}
</style>

光圈效果的参数调整

颜色调整 修改CSS中的rgba值或Canvas中的渐变颜色可以改变光圈色调。例如使用蓝色光圈：

background: radial-gradient(circle, rgba(0,150,255,0.8) 0%, rgba(0,150,255,0) 70%);

动画速度控制 在CSS中通过修改animation-duration调整速度：

animation: pulse 1s infinite alternate; /* 更快 */

在JavaScript中通过修改半径变化步长调整速度：

radius += 2; /* 加快扩张速度 */

交互式光圈实现

结合鼠标事件创建交互效果：

document.addEventListener('mousemove', (e) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(e.clientX, e.clientY, 50, 0, Math.PI * 2);

    const gradient = ctx.createRadialGradient(
        e.clientX, e.clientY, 0,
        e.clientX, e.clientY, 50
    );
    gradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
    gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

    ctx.fillStyle = gradient;
    ctx.fill();
});

性能优化建议

对于复杂场景，考虑以下优化：

• 在Canvas实现中使用window.requestAnimationFrame代替setInterval
• 对静态光圈使用CSS硬件加速：

  .glow-effect {
    will-change: transform, opacity;
  }

• 限制Canvas的绘制区域：

  ctx.clearRect(x-100, y-100, 200, 200); /* 只清除必要区域 */