C/C++教程

canvas_13 雨滴特效

本文主要是介绍canvas_13 雨滴特效，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图：

  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>

 

这篇关于canvas_13 雨滴特效的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航