当前位置：首页 > JavaScript

js实现大海

2026-02-01 18:29:08JavaScript

实现海洋动画效果

使用Canvas绘制动态波浪效果是模拟大海的常见方法。以下代码创建了一个带有波浪动画的海洋场景：

const canvas = document.getElementById('oceanCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 200;

let time = 0;
function animateWave() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#1a73e8';
    ctx.beginPath();

    const waveHeight = 20;
    const waveLength = 0.01;
    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 += 0.05;
    requestAnimationFrame(animateWave);
}
animateWave();

添加3D海洋效果

使用Three.js可以创建更逼真的3D海洋场景。需要先引入Three.js库：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const waterGeometry = new THREE.PlaneGeometry(100, 100, 128, 128);
const water = new THREE.Water(waterGeometry, {
    textureWidth: 512,
    textureHeight: 512,
    waterNormals: new THREE.TextureLoader().load('waternormals.jpg'),
    sunDirection: new THREE.Vector3(),
    sunColor: 0xffffff,
    waterColor: 0x0077be,
    distortionScale: 3.7
});
scene.add(water);

function animate() {
    requestAnimationFrame(animate);
    water.material.uniforms.time.value += 0.01;
    renderer.render(scene, camera);
}
animate();

使用CSS实现简单海浪

纯CSS也可以创建基础的波浪效果，适合性能要求不高的场景：

.ocean {
    position: relative;
    height: 100px;
    background: linear-gradient(to bottom, #0077be, #00a1ff);
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100px;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    background-size: 50% 100px;
    animation: wave 7s linear infinite;
}

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

添加海洋生物元素

增强真实感可以添加游动的鱼类或其他海洋生物：

function createFish() {
    const fish = document.createElement('div');
    fish.className = 'fish';
    fish.style.left = `${Math.random() * 100}%`;
    fish.style.top = `${60 + Math.random() * 30}%`;
    fish.style.animationDuration = `${5 + Math.random() * 10}s`;
    document.querySelector('.ocean').appendChild(fish);
}

for(let i=0; i<10; i++) {
    createFish();
}