当前位置：首页 > JavaScript

js实现全息

2026-03-14 23:32:28JavaScript

全息效果的实现方法

在JavaScript中实现全息效果通常涉及使用WebGL或Canvas API来创建动态的光影和反射效果。以下是几种常见的实现方式：

js实现全息

使用Canvas和滤镜

通过Canvas的滤镜和混合模式可以模拟全息效果。创建一个Canvas元素并应用模糊、发光等滤镜。

js实现全息

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

function drawHologram() {
    ctx.fillStyle = 'rgba(0, 100, 255, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.filter = 'blur(5px)';
    ctx.fillStyle = 'rgba(0, 200, 255, 0.3)';
    ctx.beginPath();
    ctx.arc(250, 250, 100, 0, Math.PI * 2);
    ctx.fill();

    requestAnimationFrame(drawHologram);
}
drawHologram();

使用WebGL和着色器

通过WebGL的片段着色器实现更复杂的全息效果。使用GLSL编写着色器代码模拟光的折射和衍射。

const vertexShader = `
    attribute vec2 position;
    void main() {
        gl_Position = vec4(position, 0.0, 1.0);
    }
`;

const fragmentShader = `
    precision highp float;
    uniform float time;
    void main() {
        vec2 uv = gl_FragCoord.xy / 500.0;
        float wave = sin(uv.x * 10.0 + time) * 0.1;
        gl_FragColor = vec4(0.0, uv.y + wave, 1.0, 0.5);
    }
`;

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const program = gl.createProgram();
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
gl.attachShader(program, vs);

const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
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 timeUniform = gl.getUniformLocation(program, 'time');
let time = 0;

function render() {
    time += 0.01;
    gl.uniform1f(timeUniform, time);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(render);
}
render();

使用CSS和动画

通过CSS的动画和混合模式也能实现简单的全息视觉效果。结合JavaScript动态调整样式。

<div id="hologram" style="width: 200px; height: 200px;"></div>

<script>
    const hologram = document.getElementById('hologram');
    Object.assign(hologram.style, {
        background: 'radial-gradient(circle, rgba(0,255,255,0.3), transparent)',
        boxShadow: '0 0 20px rgba(0, 200, 255, 0.5)',
        borderRadius: '50%',
        position: 'absolute',
        filter: 'blur(2px)'
    });

    function animate() {
        const x = Math.sin(Date.now() / 1000) * 50 + 150;
        const y = Math.cos(Date.now() / 1000) * 50 + 150;
        hologram.style.left = `${x}px`;
        hologram.style.top = `${y}px`;
        requestAnimationFrame(animate);
    }
    animate();
</script>