当前位置：首页 > JavaScript

js实现水流

2026-03-14 20:16:33JavaScript

实现水流效果的方法

使用JavaScript结合Canvas可以实现水流动态效果。以下是具体实现步骤：

创建Canvas基础结构

在HTML中创建Canvas元素并设置基本样式：

<canvas id="waterCanvas" width="800" height="400"></canvas>

初始化Canvas上下文并设置基础参数：

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

定义水流波纹算法

使用正弦函数模拟波纹效果，通过时间变量实现动态变化：

function drawWater() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#1a8cff';

    for (let x = 0; x < canvas.width; x += 10) {
        const y = canvas.height/2 + Math.sin(x * 0.01 + time) * 20;
        ctx.fillRect(x, y, 10, canvas.height - y);
    }
    time += 0.1;
    requestAnimationFrame(drawWater);
}

添加交互效果

通过鼠标位置影响波纹形状，增强交互性：

let mouseX = 0;
canvas.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
});

function drawInteractiveWater() {
    // ...原有绘制逻辑...
    const distortion = Math.sin((x - mouseX) * 0.01) * 30;
    const y = canvas.height/2 + Math.sin(x * 0.01 + time) * 20 + distortion;
    // ...继续绘制...
}

优化性能方案

对于复杂水流效果，可以采用离屏渲染技术：

const bufferCanvas = document.createElement('canvas');
bufferCanvas.width = canvas.width;
bufferCanvas.height = canvas.height;
const bufferCtx = bufferCanvas.getContext('2d');

function renderToBuffer() {
    // 在离屏Canvas上绘制复杂效果
    bufferCtx.clearRect(0, 0, bufferCanvas.width, bufferCanvas.height);
    // ...绘制逻辑...

    // 将结果绘制到主Canvas
    ctx.drawImage(bufferCanvas, 0, 0);
}

完整实现示例

整合上述技术的完整代码示例：

js实现水流

function initWaterSimulation() {
    const canvas = document.getElementById('waterCanvas');
    const ctx = canvas.getContext('2d');
    let time = 0;
    let particles = [];

    class WaterParticle {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.size = Math.random() * 3 + 1;
            this.speed = Math.random() * 0.2 + 0.1;
        }

        update() {
            this.y -= this.speed;
            if (this.y < 0) this.y = canvas.height;
        }

        draw() {
            ctx.fillStyle = 'rgba(100, 200, 255, 0.8)';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }

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

        // 创建新粒子
        if (Math.random() < 0.1) {
            particles.push(new WaterParticle(
                Math.random() * canvas.width,
                canvas.height
            ));
        }

        // 更新并绘制所有粒子
        particles.forEach(p => {
            p.update();
            p.draw();
        });

        // 移除超出屏幕的粒子
        particles = particles.filter(p => p.y > 0 && p.y < canvas.height);

        requestAnimationFrame(animate);
    }

    animate();
}