当前位置：首页 > JavaScript

js实现水柱

2026-03-02 08:31:55JavaScript

实现水柱效果的JavaScript方法

使用Canvas绘制动态水柱效果，结合流体力学公式模拟水的波动。以下为关键代码示例：

js实现水柱

const canvas = document.getElementById('waterCanvas');
const ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;

// 水柱参数
let waveHeight = 50;
let waveSpeed = 0.05;
let waveLength = 100;
let time = 0;

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

    // 绘制水面
    ctx.beginPath();
    ctx.moveTo(0, height/2);

    for(let x = 0; x < width; x++) {
        let y = waveHeight * Math.sin(x/waveLength + time) + height/2;
        ctx.lineTo(x, y);
    }

    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.closePath();
    ctx.fillStyle = 'rgba(64, 164, 223, 0.7)';
    ctx.fill();

    time += waveSpeed;
    requestAnimationFrame(animate);
}

animate();

物理模拟优化

添加流体动力学参数提升真实感，使用波动方程增强交互性：

js实现水柱

// 改进的波动方程参数
const damping = 0.996;
const spread = 0.5;
let surface = Array(width).fill(height/2);
let velocity = Array(width).fill(0);

function updateSurface() {
    for(let i = 1; i < width-1; i++) {
        // 波动传播计算
        velocity[i] += (surface[i-1] + surface[i+1])/2 - surface[i];
        velocity[i] *= damping;
    }

    for(let i = 1; i < width-1; i++) {
        surface[i] += velocity[i] * spread;
    }
}

交互功能实现

添加鼠标交互产生涟漪效果：

canvas.addEventListener('click', (e) => {
    const posX = e.clientX - canvas.offsetLeft;
    velocity[posX] = -20; // 点击位置产生扰动
});

性能优化建议

使用WebGL的Three.js库处理复杂水效果：

import * as THREE from 'three';

// 创建水面几何体
const waterGeometry = new THREE.PlaneGeometry(10, 10, 128, 128);
const waterMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 }
    },
    vertexShader: `
        uniform float time;
        void main() {
            vec3 pos = position;
            pos.y += sin(pos.x * 5.0 + time) * 0.2;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        }
    `,
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(0.0, 0.5, 1.0, 0.8);
        }
    `
});

以上方法可根据需求选择实现方案，Canvas方案适合轻量级应用，WebGL方案适合高性能要求的场景。