当前位置：首页 > JavaScript

js实现光圈效果

2026-01-30 18:29:19JavaScript

实现光圈效果的方法

光圈效果可以通过多种方式实现，以下是几种常见的实现方法：

使用CSS和JavaScript结合

通过CSS定义光圈样式，JavaScript控制动画效果。以下是一个简单的实现：

<div class="aperture"></div>

.aperture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

const aperture = document.querySelector('.aperture');
document.addEventListener('mousemove', (e) => {
  aperture.style.left = `${e.clientX - 50}px`;
  aperture.style.top = `${e.clientY - 50}px`;
});

使用Canvas绘制光圈

Canvas提供了更灵活的控制方式，可以创建更复杂的光圈效果：

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

const canvas = document.getElementById('apertureCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawAperture(x, y, radius) {
  const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = gradient;
  ctx.fill();
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const time = Date.now() * 0.001;
  const radius = 50 + Math.sin(time * 2) * 20;

  drawAperture(canvas.width / 2, canvas.height / 2, radius);
  requestAnimationFrame(animate);
}

animate();

使用WebGL实现高级光圈效果

对于更复杂的光圈效果，可以使用WebGL：

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

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 顶点着色器
const vsSource = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0.0, 1.0);
  }
`;

// 片段着色器
const fsSource = `
  precision highp float;
  uniform vec2 resolution;
  uniform float time;

  void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * resolution.xy) / resolution.y;
    float dist = length(uv);
    float glow = 0.05 / dist;

    float pulse = 0.5 + 0.5 * sin(time);
    glow *= pulse;

    gl_FragColor = vec4(vec3(glow), 1.0);
  }
`;

// 初始化WebGL程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 设置顶点数据
const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const position = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);

// 设置统一变量
const resolution = gl.getUniformLocation(program, 'resolution');
gl.uniform2f(resolution, canvas.width, canvas.height);

function animate() {
  const time = gl.getUniformLocation(program, 'time');
  gl.uniform1f(time, performance.now() * 0.001);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(animate);
}

animate();