canvas_13 雨滴特效

2022-01-02 02:34:02 阅读：118 来源： 互联网

标签：function canvas ctx 13 雨滴 window var

效果图：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8         <title>Canvas</title>
  9         <style>
 10             * {
 11                 margin: 0;
 12                 padding: 0;
 13             }
 14 
 15             html,
 16             body {
 17                 height: 100%;
 18             }
 19 
 20             canvas {
 21                 display: block;
 22                 background-color: aqua;
 23             }
 24         </style>
 25     </head>
 26 
 27     <body>
 28         <canvas id="canvas"></canvas>
 29 
 30         <script>
 31             var canvas = document.querySelector("#canvas");
 32             var ctx = canvas.getContext("2d");
 33             var w = canvas.width = window.innerWidth;
 34             var h = canvas.height = window.innerHeight;
 35 
 36             function randNum(min, max) {
 37                 return Math.random() * (max - min) + min;
 38             }
 39 
 40             function drawCircle(x, y, r, color) {
 41                 ctx.beginPath();
 42                 ctx.arc(x, y, r, 0, Math.PI * 2);
 43                 ctx.strokeStyle = color || "#000";
 44                 ctx.stroke();
 45             }
 46 
 47             // 创建雨滴对象
 48             function Drop() {}
 49 
 50             Drop.prototype = {
 51                 init: function() {
 52                     this.x = randNum(0, w);
 53                     this.y = 0;
 54                     // y 方向速度
 55                     this.vy = randNum(3, 4);
 56                     // 雨滴下落的最大高度 80% ~ 90%
 57                     this.dropEnd = randNum(0.8 * h, 0.9 * h);
 58                     this.radius = 1;
 59                     // 半径扩大的速度
 60                     this.vRadius = 1;
 61                     // 圆的透明度
 62                     this.transparency = 1;
 63                     // 透明度的变化系数
 64                     this.vTransparency = 0.93;
 65                 },
 66                 draw: function() {
 67                     // 雨滴下落中
 68                     if (this.y < this.dropEnd) {
 69                         ctx.fillStyle = "rgba(0, 255, 255)";
 70                         ctx.fillRect(this.x, this.y, 2, 10);
 71                     } else { // 雨滴散开
 72                         ctx.beginPath();
 73                         ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
 74                         ctx.strokeStyle = "rgba(0, 255, 255," + this.transparency + ")";
 75                         ctx.stroke();
 76                     }
 77 
 78                     this.update();
 79                 },
 80                 update: function() {
 81                     if (this.y < this.dropEnd) {
 82                         this.y += this.vy;
 83                     } else {
 84                         if (this.transparency > 0.03) {
 85                             this.radius += this.vRadius;
 86                             if (this.radius > 20) {
 87                                 this.transparency *= this.vTransparency;
 88                             }
 89                         } else {
 90                             this.init();
 91                         }
 92                     }
 93                 }
 94             }
 95 
 96             // main
 97             window.onresize = function() {
 98                 w = canvas.width = window.innerWidth;
 99                 h = canvas.height = window.innerHeight;
100             }
101 
102             var dropArray = [];
103             for (var i = 0; i < 30; i++) {
104                 // 每个雨滴延迟2毫秒
105                 setTimeout(function() {
106                     var drop = new Drop();
107                     drop.init();
108                     dropArray.push(drop);
109                 }, i * 200)
110             }
111 
112             function animation() {
113                 requestAnimationFrame(animation);
114                 // 视觉渐变
115                 ctx.fillStyle = "rgba(0, 0, 0, 0.1)"
116                 ctx.fillRect(0, 0, w, h);
117                 for (var i = 0; i < dropArray.length; i++) {
118                     dropArray[i].draw();
119                 }
120             }
121 
122             animation();
123         </script>
124 
125     </body>
126 
127 </html>

标签：function,canvas,ctx,13,雨滴,window,var
来源： https://www.cnblogs.com/luwei0915/p/15756643.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas_13 雨滴特效