diff --git a/README.md b/README.md
index a6f794b0c81f9aa856dc0b7b44c24ca950b52d72..d3b99a4e149c53612a3ad6f523f7111bf5ec8e1c 100644
--- a/README.md
+++ b/README.md
@@ -1,110 +1,97 @@
-# 雨滴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
+
+这是一个使用 HTML5 Canvas 实现的雨滴动画效果的简单示例。雨滴从屏幕顶部下落，到达底部后会以波纹的形式逐渐淡出。
+
+## 效果展示
+![](rain.gif)
+
+## 功能特点
+- 雨滴下落动画：使用面向对象编程思想创建雨滴对象，控制其位置和运动。
+- 波纹效果：雨滴落地后产生半径和透明度逐渐变化的波纹。
+- 自适应窗口大小：动画自动适配浏览器窗口的宽高变化。
+
+## 技术要点
+- **Canvas 画布**：用于绘制动画图形。
+- **面向对象**：使用 JavaScript 构造函数和原型链封装雨滴的初始化、绘制和更新逻辑。
+- **动画刷新**：通过 `requestAnimationFrame` 实现动画循环，达到流畅效果。
+- **音效**：雨滴落地时播放雨声。
+
+## 使用方式
+1. 打开浏览器，运行 `index.html`。
+2. 页面加载后，动画自动开始。
+3. 窗口大小变化时，动画区域会自动调整以适配新尺寸。
+
+## 核心代码示例
+```javascript
+window.onload = function () {
+    var can = document.getElementById("canvas"),
+        ctx = can.getContext("2d"),
+        au_rain = document.getElementById("audio_rain"),
+        w = can.width = window.innerWidth,
+        h = can.height = window.innerHeight;
+
+    window.onresize = function () {
+        w = can.width = window.innerWidth;
+        h = can.height = window.innerHeight;
+    };
+
+    function Rain() {}
+    Rain.prototype = {
+        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;
+        },
+        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);
+                ctx.stroke();
+                au_rain.play();
+            } else {
+                ctx.fillStyle = "rgb(0,255,255)";
+                ctx.fillRect(this.x, this.y, 5, 10);
+            }
+            this.update();
+        },
+        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();
+                }
+            }
+        }
+    };
+
+    var Rains = [];
+    for (var i = 0; i < 30; i++) {
+        setTimeout(function () {
+            var obj = new Rain();
+            obj.init();
+            Rains.push(obj);
+        }, i * 200);
+    }
+
+    ~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);
+    }();
+};
+```
\ No newline at end of file