HTML&CSS&JS 实现网页底部养鱼动态效果

🌊 引言

那天我突发奇想：能否在网页底部创造一个灵动的海底世界？于是开启了这段Canvas养鱼动画的开发之旅。作为前端开发者，我选择用HTML5 Canvas来实现这个梦想，目标是创造包含水面波动、鱼群游动和交互效果的数字生态系统。

🧠 效果分析与实现思路

该网页养鱼效果的核心在于：

1. 水面波动效果 - 使用Canvas实时渲染水波物理模拟
2. 鱼类行为系统 - 实现鱼类的游动动画和物理行为
3. 交互系统 - 添加鼠标交互产生水波涟漪
4. 方向控制 - 支持点击翻转水面方向

💻 静态页面效果图

代码实例

HTML布局

<link rel="stylesheet" href="./style.css">
<div id="fish-container" class="container"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="./script.js"></script>

CSS样式

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 隐藏滚动条保证沉浸感 */
}

.container {
  width: 100%;
  height: 50%;
  transform: translateY(450px); /* 定位到底部 */
  background-color: #FFFFFF;
}

JS交互核心逻辑

var FISH = function(renderer) {
  this.renderer = renderer;
  this.init();
};

FISH.prototype = {
  GRAVITY: 0.4,
  
  init: function() {
    this.direction = Math.random() < 0.5;
    this.x = this.direction 
      ? (this.renderer.width + this.renderer.THRESHOLD) 
      : -this.renderer.THRESHOLD;
    
    this.previousY = this.y;
    this.vx = this.getRandomValue(4,10) * (this.direction ? -1 : 1);

    if(this.renderer.reverse) {
      this.y = this.getRandomValue(
        this.renderer.height * 1/10, 
        this.renderer.height * 4/10
      );
      this.vy = this.getRandomValue(2,5);
      this.ay = this.getRandomValue(0.05,0.2);
    } else {
      this.y = this.getRandomValue(
        this.renderer.height * 6/10, 
        this.renderer.height * 9/10
      );
      this.vy = this.getRandomValue(-5,-2);
      this.ay = this.getRandomValue(-0.2,-0.05);
    }
    
    this.isOut = false;
    this.theta = 0;
    this.phi = 0;
  },
  
  // ... 后续鱼类行为模拟代码 ...
};

HTML5 Canvas不仅仅是一个绘图工具，它是连接创意与技术的桥梁。通过这个养鱼案例，我们看到：
"几行代码可以创造生命，在Canvas的世界里，我们不仅是程序员，更是数字世界的造物主。"
前端技术的魅力在于它能将抽象的概念转化为可见、可感的体验。Canvas技术为我们提供了无限的创作空间，无论你是前端新手还是资深开发者，Canvas都是一个值得深入探索的领域。
期待看到你创造出更加惊艳的Canvas作品！