Разноцветные падающие звёзды на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<canvas id="bc"></canvas> <canvas id="fc"></canvas> <script> var w = bc.width = fc.width = window.innerWidth, h = bc.height = fc.height = window.innerHeight, bctx = bc.getContext('2d'), fctx = fc.getContext('2d'), size = [20, 60], //[min, max] shineDir = [.01, .02], angSpeed = [.01, .04], stars = [], frame = (Math.random() * 360) | 0, pentaRadiant = Math.PI * 2 / 5; function rand(ar) { return Math.random() * (ar[1] - ar[0]) + ar[0]; } function Star() { this.size = rand(size); this.x = Math.random() * w; this.y = -this.size * 2; this.vy = this.size / 10; this.vx = Math.random() * 6 - 3; this.ay = this.size / 5000; this.shine = 0; this.shineDir = rand(shineDir); this.color = 'hsla(hue, 100%, brightness%, .8)'.replace('hue', frame % 360); this.rot = Math.random() * 2 * Math.PI; this.omega = rand(angSpeed); if (Math.random() < .5) this.omega *= -1; } Star.prototype.use = function() { this.x += this.vx; this.y += this.vy += this.ay; var newShine = this.shine + this.shineDir; if (newShine < 0 || newShine > 1) this.shineDir *= -1 else this.shine = newShine; this.rot += this.omega; bctx.translate(this.x, this.y); fctx.translate(this.x, this.y); bctx.rotate(this.rot); fctx.rotate(this.rot); bctx.fillStyle = fctx.fillStyle = this.color.replace('brightness', (.25 + this.shine / 2) * 100); fctx.beginPath(); fctx.moveTo(this.size, 0); for (var i = 0; i < 5; ++i) { var rad = pentaRadiant * i, halfRad = rad + pentaRadiant / 2; fctx.lineTo(Math.cos(rad) * this.size, Math.sin(rad) * this.size); bctx.fillRect(Math.cos(rad) * this.size, Math.sin(rad) * this.size, 2, 2); fctx.lineTo(Math.cos(halfRad) * this.size / 2, Math.sin(halfRad) * this.size / 2); } fctx.closePath(); fctx.fill(); fctx.rotate(-this.rot); bctx.rotate(-this.rot); fctx.translate(-this.x, -this.y); bctx.translate(-this.x, -this.y); } function anim() { window.requestAnimationFrame(anim); ++frame; bctx.fillStyle = 'rgba(0, 0, 0, .1)'; bctx.fillRect(0, 0, w, h); fctx.clearRect(0, 0, w, h); if (Math.random() < .1) stars.push(new Star); for (var s = 0; s < stars.length; ++s) { stars[s].use(); if (stars[s].x + stars[s].size < 0) { stars.splice(s, 1); --s; } } } anim(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Надо бы сохранить такой эффект, наверняка пригодится)
Да, эффект интересный. Пожалуй, кину в закладки