html--雨滴

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body { overflow: hidden; background: black; } </style> </HEAD> <BODY> <canvas id="canvas-club"></canvas> <script> var c = document.getElementById("canvas-club"); var ctx = c.getContext("2d"); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var clearColor = 'rgba(0, 0, 0, .1)'; var max = 30; var drops = []; function random(min, max) { return Math.random() * (max - min) + min; } function O() {} O.prototype = { init: function() { this.x = random(0, w); this.y = 0; this.color = 'hsl(180, 100%, 50%)'; this.w = 2; this.h = 1; this.vy = random(4, 5); this.vw = 3; this.vh = 1; this.size = 2; this.hit = random(h * .8, h * .9); this.a = 1; this.va = .96; }, draw: function() { if (this.y > this.hit) { ctx.beginPath(); ctx.moveTo(this.x, this.y - this.h / 2); ctx.bezierCurveTo( this.x + this.w / 2, this.y - this.h / 2, this.x + this.w / 2, this.y + this.h / 2, this.x, this.y + this.h / 2); ctx.bezierCurveTo( this.x - this.w / 2, this.y + this.h / 2, this.x - this.w / 2, this.y - this.h / 2, this.x, this.y - this.h / 2); ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')'; ctx.stroke(); ctx.closePath(); } else { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.size, this.size * 5); } this.update(); }, update: function() { if(this.y < this.hit){ this.y += this.vy; } else { if(this.a > .03){ this.w += this.vw; this.h += this.vh; if(this.w > 100){ this.a *= this.va; this.vw *= .98; this.vh *= .98; } } else { this.init(); } } } } function resize(){ w = c.width = window.innerWidth; h = c.height = window.innerHeight; } function setup(){ for(var i = 0; i < max; i++){ (function(j){ setTimeout(function(){ var o = new O(); o.init(); drops.push(o); }, j * 200) }(i)); } } function anim() { ctx.fillStyle = clearColor; ctx.fillRect(0,0,w,h); for(var i in drops){ drops[i].draw(); } requestAnimationFrame(anim); } window.addEventListener("resize", resize); setup(); anim(); </script> </BODY> </HTML>
上一篇:Linux PTP学习


下一篇:【AI+chat】手把手配置kimichat集成到微信公众号中对话聊天