完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas霓虹雨效果</title> <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>
评论前必须登录!
注册