From 0a7bea01f03743aa600f4cecedc4bbd0168472dd Mon Sep 17 00:00:00 2001
From: gitee-bot <no-reply@git.oschina.net>
Date: Mon, 30 Jun 2025 15:35:15 +0000
Subject: [PATCH] Update README.md

---
 README.md | 151 +++++++++++++++---------------------------------------
 1 file changed, 42 insertions(+), 109 deletions(-)

diff --git a/README.md b/README.md
index a6f794b..bbe8ae2 100644
--- a/README.md
+++ b/README.md
@@ -1,110 +1,43 @@
-# 雨滴demo
-    效果如图：
-![](rain.gif)    
-
-    核心代码
-```angular2html
-   window.onload = function () {
-       var can = document.getElementById("canvas"),//获取canvas
-           ctx = can.getContext("2d"),//画笔
-           au_rain = document.getElementById("audio_rain"),
-           w = can.width = window.innerWidth,//赋值canvas的宽同时赋值给变量
-           h = can.height = window.innerHeight;//赋值canvas的高同时赋值给变量
-       /**
-        * 当页面发生变化时重新赋值can的宽高并重新赋值w h
-        */
-       window.onresize = function () {
-           w = can.width = window.innerWidth;
-           h = can.height = window.innerHeight;
-       };
-       // 通过函数构造器来创建一个雨滴对象
-       function Rain() {}
-       /**
-        * 给新创建的雨滴对象添加功能，实际上就是添加方法、
-        * 通过原型链的方式来添加，本质就是找到Rain的模型来修改模型
-        */
-       Rain.prototype = {
-           /**
-            * 雨滴的初始化思路：雨滴是从页面顶部随机x位置落到页面
-            * 底部的一个范围内 然后变成由变成透明度
-            * 慢慢变淡半径慢慢变大的一个波纹而结束
-            * 涉及到的参数有 ：页面顶部的x坐标 页面顶部的y坐标 从上往下掉落的速度
-            * 掉落到页面底部的范围值 波纹的的半径 波纹半径变大的速度 波纹的透明度 波纹透明度变淡的速度
-            */
-           init:function () {
-               this.x = Math.random()*w;
-               this.y = 0;
-               this.speed_y = Math.random()*4 +3;
-               this.max_y = (Math.random()*2/10 + 0.6)*h;
-               this.r = 1;
-               this.speed_r = 1;
-               this.opacity = 1;
-               this.speed_opacity = 0.96;
-           },
-           /**
-            * 画图的思路：
-            * 雨滴只有两种形式、一种是矩形一种是圆形
-            * 当其Y值大于其下落的最大的y值时候则画圆否则画矩形
-            */
-           draw:function () {
-               if(this.y > this.max_y){
-                   // 此时画圆
-                   ctx.beginPath();//开始一个新的绘制路径
-                   ctx.strokeStyle = "rgba(0,255,255"+ this.opacity + ")";// 设置弧线的颜色
-                   ctx.arc(this.x,this.max_y,this.r,0,Math.PI*2,false);//x y r startAngle endAngle 是否逆时针绘图
-                   ctx.stroke();//关闭
-                   au_rain.play();
-               }else {
-                   ctx.fillStyle = "rgb(0,255,255)";
-                   ctx.fillRect(this.x,this.y,5,10)
-               }
-               this.update();//因为此时画的图是不动的，必须不停重绘才能改变其对应的值
-           },
-           /**
-            * 更新的思路：
-            * 如果y的值小于最大的y的值此时水滴还是矩形
-            * 则需要不更更新其y值，若其y值大于其max_y值则其已变成
-            * 咯圆形，则需要更新圆形的半径和透明度
-            * 并且需要在圆形的透明度在小于某个值时（肉眼看不太清时）
-            * 做特殊处理---->重新初始化
-            */
-           update:function () {
-               if(this.y < this.max_y){
-                   this.y += this.speed_y;
-               }else {
-                   this.opacity *= this.speed_opacity;
-                   this.r += this.speed_r;
-                   if(this.opacity < 0.01){
-                       this.init();
-                       au_rain.pause();
-                   }
-               }
-           }
-       };
-       /**
-        * 每过200ms生成一个雨滴并存放在容器中
-        * @type {Array}
-        */
-       var Rains = [];//定义一个存放雨滴的容器
-       for(var i = 0;i < 30;i++){
-           setTimeout(function () {
-               var obj = new Rain();
-               obj.init();
-               Rains.push(obj);
-           },i*200)
-       }
-       /**
-        * 根据屏幕刷新频率调用draw方法即改变y值生成雨滴下落的动画
-        * http://www.cnblogs.com/xiaohuochai/p/5777186.html
-        */
-       ~function move() {
-           ctx.fillStyle = "rgba(0,0,0,0.1)";
-           ctx.fillRect(0,0,w,h);
-           for(var i = 0;i<Rains.length;i++){
-               Rains[i].draw();
-           }
-           requestAnimationFrame(move);
-       }();
-   };
-```    
 
+
+# 雨滴 Demo
+
+这是一个用于演示和学习目的的简单雨滴效果实现。该项目旨在帮助开发者了解如何使用 HTML、JavaScript 以及面向对象编程的概念来在网页上创建动态的雨滴效果。
+
+## 目标
+
+- 学习画布（Canvas）的使用方法。
+- 理解面向对象编程在 JavaScript 中的应用。
+- 实现雨滴效果的具体逻辑。
+
+## 组成部分
+
+- `index.html`: 项目的主要 HTML 文件，包含页面的基本结构。
+- `js/rain.js`: JavaScript 文件，实现雨滴效果的逻辑。
+- `rain.gif`: 与雨滴效果相关的 GIF 动画文件。
+- `mp3/rain.wav` 和 `mp3/rain1.mp3`: 与雨滴相关的音频文件。
+
+## 使用方法
+
+1. 打开 `index.html` 文件以查看雨滴效果。
+2. 打开 `js/rain.js` 文件以查看和修改雨滴效果的 JavaScript 实现。
+3. 可以将 GIF 和音频文件用于增强雨滴效果的多媒体体验。
+
+## 知识回顾
+
+### 一、画布的使用
+
+- HTML5 Canvas 提供了用于绘制图形的 API。
+- 练习 1：使用 Canvas 绘制简单的图形。
+
+### 二、面向对象
+
+- 在 JavaScript 中使用面向对象编程可以更好地组织代码。
+- 一个小 demo 来展示如何创建对象和使用对象的方法。
+
+### 三、雨滴的具体实现
+
+- 使用面向对象的方法创建雨滴对象。
+- 在 Canvas 上绘制雨滴并实现动态下落效果。
+
+如需更多详细信息，请查看相关代码文件。
\ No newline at end of file
-- 
Gitee