当前位置：首页 > JavaScript

js实现水流

2026-02-01 21:00:45JavaScript

实现水流效果的方法

使用JavaScript和Canvas可以模拟水流效果。以下是实现的基本步骤：

创建Canvas元素 在HTML中创建一个Canvas元素，并设置合适的宽度和高度：

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

初始化Canvas上下文 获取Canvas元素并初始化2D绘图上下文：

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

设置水流参数 定义水流的宽度、高度、波浪高度和速度等参数：

js实现水流

const waveHeight = 20;
const waveLength = 0.01;
const waveSpeed = 0.05;
let time = 0;

绘制水流函数 创建一个函数来绘制水流效果，使用正弦函数模拟波浪：

function drawWater() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(0, 100, 255, 0.5)';
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);

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

    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.closePath();
    ctx.fill();

    time += waveSpeed;
    requestAnimationFrame(drawWater);
}

启动动画 调用drawWater函数启动动画：

drawWater();

优化水流效果

添加渐变效果 使用线性渐变使水流看起来更自然：

js实现水流

const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'rgba(0, 150, 255, 0.7)');
gradient.addColorStop(1, 'rgba(0, 50, 255, 0.3)');
ctx.fillStyle = gradient;

添加波纹细节 在波浪上叠加更小的波纹以增加细节：

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

交互式水流

响应鼠标移动 根据鼠标位置影响波浪形状：

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

function drawInteractiveWater() {
    // 在绘制函数中添加鼠标影响
    for (let x = 0; x < canvas.width; x++) {
        const distanceToMouse = Math.abs(x - mouseX);
        const mouseEffect = distanceToMouse < 100 ? (100 - distanceToMouse) / 10 : 0;
        const y = canvas.height / 2 + Math.sin(x * waveLength + time) * (waveHeight + mouseEffect);
        ctx.lineTo(x, y);
    }
}

性能优化

使用离屏Canvas 对于复杂的水流效果，可以使用离屏Canvas进行预渲染：

const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
const offscreenCtx = offscreenCanvas.getContext('2d');

// 在离屏Canvas上绘制
function renderToOffscreen() {
    offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    // 绘制逻辑...
}

// 在主Canvas上绘制离屏内容
function draw() {
    ctx.drawImage(offscreenCanvas, 0, 0);
    requestAnimationFrame(draw);
}

这些方法可以组合使用，根据需求调整参数和效果，创建出不同风格的水流动画。